漂亮的按鈕（CSS 過渡和鏈接樣式）
阿新 • • 發佈：2018-04-14
需要 enter 完成 定義 none borde com ado pla
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 過渡和鏈接樣式）