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效果开始的时候
漂亮的按钮(CSS 过渡和链接样式)
原文地址:https://www.cnblogs.com/blackfriday/p/8835330.html