五款漂亮的純CSS3動畫按鈕的實例教程
發(fā)布時間:2014-11-21 14:21:24 作者:佚名
我要評論

今天我們來分享五款很不錯的CSS3按鈕動畫,每一種都是鼠標(biāo)滑過動畫形式,雖然這些動畫按鈕不是十分華麗,但是小編覺得不像其他按鈕那樣很難擴展,我們可以修改CSS代碼隨意改變自己喜歡的顏色樣式
今天來分享很不錯的CSS3按鈕動畫,這款CSS3按鈕一共有5種動畫方式,每一種都是鼠標(biāo)滑過動畫形式,雖然這些動畫按鈕不是十分華麗,但是小編覺得不像其他按鈕那樣很難擴展,我們可以修改CSS代碼隨意改變自己喜歡的顏色樣式。
讓我們一起來看看實現(xiàn)這5中樣式動畫按鈕的HTML代碼和CSS代碼吧。以第一個按鈕為例,其他按鈕的代碼大家可以下載源代碼來研究,并不是很難。
HTML代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <div class="button01">
- <a href="#">Download</a>
- <p class="top">click to begin</p>
- <p class="bottom">1.2MB .zip</p>
- </div>
CSS代碼:
CSS Code復(fù)制內(nèi)容到剪貼板
- .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+ */
- background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
- }
- .button01 a, p {
- -webkit-border-radius: 10px;
- -moz-border-radius: 10px;
- border-radius: 10px;
- -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
- -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
- box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
- }
- p {
- background: #222;
- display: block;
- height: 40px;
- width: 180px;
- margin: -50px 0 0 10px;
- /*TYPE*/
- text-align: center;
- font: 12px/45px Helvetica, Verdana, sans-serif;
- color: #fff;
- /*POSITION*/
- position: absolute;
- z-index: -1;
- /*TRANSITION*/
- -webkit-transition: margin 0.5s ease;
- -moz-transition: margin 0.5s ease;
- -o-transition: margin 0.5s ease;
- -ms-transition: margin 0.5s ease;
- transition: margin 0.5s ease;
- }
- /*HOVER*/
- .button01:hover .bottombottom {
- margin: -10px 0 0 10px;
- }
- .button01:hover .top {
- margin: -80px 0 0 10px;
- line-height: 35px;
- }
- /*ACTIVE*/
- .button01 a:active {
- background: #00b7ea; /* Old browsers */
- background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottombottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */
- background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
- }
- .button01:active .bottombottom {
- margin: -20px 0 0 10px;
- }
- .button01:active .top {
- margin: -70px 0 0 10px;
- }
相關(guān)推薦:
一款純css3實現(xiàn)的鼠標(biāo)經(jīng)過按鈕特效教程
利用css3實現(xiàn)的簡單的鼠標(biāo)懸停按鈕
相關(guān)文章
CSS3實現(xiàn)帶網(wǎng)站Logo小圖標(biāo)的各大網(wǎng)站分享按鈕源碼
今天介紹一款非常強大的CSS3各大網(wǎng)站分享按鈕,非常多的按鈕,基本上一些國外的社交網(wǎng)站都有。另外,這款CSS3分享按鈕還帶有社交網(wǎng)站的Logo小圖標(biāo),外觀非常漂亮。2014-12-23- 今天要分享的這款分享按鈕是基于CSS和jQuery的,按鈕比較大,非常大氣。鼠標(biāo)移動到左側(cè)的圖標(biāo)上就可以在右側(cè)顯示對應(yīng)的分享按鈕小圖標(biāo),且小圖標(biāo)伴有鼠標(biāo)滑過的放大顯示特2014-12-23
- 這篇文章主要介紹了純css3實現(xiàn)的鼠標(biāo)懸停動畫按鈕,需要的朋友可以參考下2014-12-23
- 腳本之家之前為大家分享了很多款純css3實現(xiàn)的實用按鈕。今天給大家?guī)硪豢罨赾ss3的動畫按鈕。很漂亮交互性也很好,需要的朋友可以參考下2014-11-23
純CSS3實現(xiàn)的帶Tooltip提示框的按鈕特效源碼
今天我向大家分享一款有特色的CSS3按鈕,該按鈕帶有Tooltip功能,鼠標(biāo)滑過按鈕時即可顯示Tooltip,另外按鈕還有一個漂亮的圖標(biāo)2014-11-19- 這篇文章主要為大家介紹了一款動畫按鈕,只利用css3就可以完成,第一排的按鈕當(dāng)鼠標(biāo)經(jīng)過的背景色動畫切換,圖標(biāo)從右側(cè)飛入,第二排的按鈕當(dāng)鼠標(biāo)經(jīng)過的時候邊框動畫切換,圖2014-11-17
- CSS3 引入了眾多供功能強大的新特性,讓設(shè)計和開發(fā)人員能夠輕松的創(chuàng)作出各種精美的界面效果。下面這些發(fā)出閃亮光澤的按鈕,很漂亮吧?把鼠標(biāo)懸停在按鈕上,還有動感的光澤2015-08-19