漂亮的按鈕（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（五）- 漂亮的盒子 - 為嵌入圖片和元素添加樣式