漂亮的按钮（CSS 过渡和链接样式）

最新推荐文章于 2023-04-12 19:55:37 发布

weixin_30613343

最新推荐文章于 2023-04-12 19:55:37 发布

阅读量476

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/blackfriday/p/8835330.html

本文介绍了一个使用CSS实现的带有过渡效果的按钮样式案例，包括按钮的基本样式设置、hover和active状态的效果，并解释了CSS transition属性的作用。

HTML 代码：

<body>
<a class="anniu" href="http://www.baidu.com/">
        百度一下
</a>
</body>

CSS 代码：

/* CSS Document */
.anniu{
display:block;
width:120px;
height:40px;
background-color:#333333;
color:#FFFFFF;
text-align:center;
font-size:18px;
line-height:40px;
border-radius: 25px;
border:none;
box-shadow:none;
text-decoration: none;
transition: box-shadow 0.5s;
-webkit-transition: box-shadow 0.5s;
}
.anniu:hover{
    box-shadow:0px 0px 5px 1px #808080;
}
.anniu:active{
    box-shadow:0px 0px 5px 1px #FF0000;
}