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

本文转载自查看原文 2018-04-14 21:02 3233 技术加餐

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;
}

详解

链接样式：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

transition属性：

　　1、指定CSS属性的name，transition效果

　　2、transition效果需要指定多少秒或毫秒才能完成

　　3、指定transition效果的转速曲线

　　4、定义transition效果开始的时候

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css3——漂亮的字体样式多个漂亮的按钮样式和图片集合 WPF漂亮的窗体样式、按钮样式、复选框样式 HTML篇之CSS样式：按钮变成超链接的样式用CSS把a按钮实现按下去的样式 20个漂亮 CSS3 按钮效果及优秀的制作教程分享10款漂亮实用的CSS3按钮 css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果 css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果 CSS（五）- 漂亮的盒子 - 为嵌入图片和元素添加样式