^{<small id="ypycs"></small>}

五款漂亮的純CSS3動畫按鈕的實例教程

2024-07-11 08:30:18

字體：大中小

來源：轉載

供稿：網友

　　今天來分享很不錯的CSS3按鈕動畫，這款CSS3按鈕一共有5種動畫方式，每一種都是鼠標滑過動畫形式，雖然這些動畫按鈕不是十分華麗，但是小編覺得不像其他按鈕那樣很難擴展，我們可以修改CSS代碼隨意改變自己喜歡的顏色樣式。

　　讓我們一起來看看實現這5中樣式動畫按鈕的HTML代碼和CSS代碼吧。以第一個按鈕為例，其他按鈕的代碼大家可以下載源代碼來研究，并不是很難。

　　HTML代碼：

XML/HTML Code復制內容到剪貼板

　　CSS代碼：

CSS Code復制內容到剪貼板

.button01 { width: 200px;
margin: 50px auto 20px auto; }
.button01 a {
display: block; height: 50px;
width: 200px;
/*TYPE*/ color: white;
font: 17px/50px Helvetica, Verdana, sans-serif; text-decoration: none;
text-align: center; text-transform: uppercase;
/*GRADIENT*/
background: #00b7ea; /* Old browsers */ background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */