用CSS把a按钮实现按下去的样式


a{
font-family:Arial;
font-size:.8em;
text-align:center;
margin:3px;/*统一设置所有样式*/


}
a:link,a:visited{ /*超链接正常状态,被访问过的状态*/
color:#A62020;
padding:4px 10px 4px 10px;
background-color:#ecd8db;
text-decoration:none;
border-top:1px solid #eee; /*边框实现阴影*/
border-left:1px solid #eee;
border-bottom:1px solid #717171;
border-right:1px solid #717171;
}
a:hover{ /*鼠标指针经过时的超链接*/
color:green; /*改变文字颜色*/
padding:5px 8px 3px 12px; /*改变文字的位置*/
background-color:#e2c4c9; /*改变背景色*/
border-top:1px solid #717171; /*边框变化实现按下去的效果*/
border-left:1px solid #717171;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
}

首先设置了a标签的整体风格样式,然后对3个伪属性颜色 背景色 边框,文字位置的修改,从而模拟了按钮特效

posted @ 2018-11-16 17:00  信念-在空中飘扬~  阅读(4021)  评论(0编辑  收藏  举报