码迷,mamicode.com
首页 > Web开发 > 详细

漂亮的按钮(CSS 过渡和链接样式)

时间:2018-04-14 23:48:22      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:active   box   nbsp   site   isp   cti   开始   链接   鼠标   

 

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 过渡和链接样式)

标签:active   box   nbsp   site   isp   cti   开始   链接   鼠标   

原文地址:https://www.cnblogs.com/blackfriday/p/8835330.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!