CSS3實(shí)現(xiàn)動(dòng)畫(huà)按鈕代碼分享

本篇內(nèi)容介紹了“CSS3實(shí)現(xiàn)動(dòng)畫(huà)按鈕代碼分享”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

為企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站優(yōu)化、全網(wǎng)整合營(yíng)銷(xiāo)推廣、競(jìng)價(jià)托管、品牌運(yùn)營(yíng)等營(yíng)銷(xiāo)獲客服務(wù)。創(chuàng)新互聯(lián)擁有網(wǎng)絡(luò)營(yíng)銷(xiāo)運(yùn)營(yíng)團(tuán)隊(duì)，以豐富的互聯(lián)網(wǎng)營(yíng)銷(xiāo)經(jīng)驗(yàn)助力企業(yè)精準(zhǔn)獲客，真正落地解決中小企業(yè)營(yíng)銷(xiāo)獲客難題，做到“讓獲客更簡(jiǎn)單”。自創(chuàng)立至今，成功用技術(shù)實(shí)力解決了企業(yè)“網(wǎng)站建設(shè)、網(wǎng)絡(luò)品牌塑造、網(wǎng)絡(luò)營(yíng)銷(xiāo)”三大難題，同時(shí)降低了營(yíng)銷(xiāo)成本，提高了有效客戶(hù)轉(zhuǎn)化率，獲得了眾多企業(yè)客戶(hù)的高度認(rèn)可！

今天來(lái)分享很不錯(cuò)的CSS3按鈕動(dòng)畫(huà)，這款CSS3按鈕一共有5種動(dòng)畫(huà)方式，每一種都是鼠標(biāo)滑過(guò)動(dòng)畫(huà)形式，雖然這些動(dòng)畫(huà)按鈕不是十分華麗，但是小編覺(jué)得不像其他按鈕那樣很難擴(kuò)展，我們可以修改CSS代碼隨意改變自己喜歡的顏色樣式。

CSS3實(shí)現(xiàn)動(dòng)畫(huà)按鈕代碼分享

讓我們一起來(lái)看看實(shí)現(xiàn)這5中樣式動(dòng)畫(huà)按鈕的HTML代碼和CSS代碼吧。以第一個(gè)按鈕為例，其他按鈕的代碼大家可以下載源代碼來(lái)研究，并不是很難。

HTML代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <div class="button01">  

  2.       <a href="#">Download</a>  

  3.       <p class="top">click to begin</p>  

  4.       <p class="bottom">1.2MB .zip</p>  

  5. </div>  

CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .button01 {   

  2.   width: 200px;   

  3.   margin: 50px auto 20px auto;   

  4. }   

  5.   

  6. .button01 a {   

  7.   display: block;   

  8.   height: 50px;   

  9.   width: 200px;   

  10.   

  11.   /*TYPE*/  

  12.   color: white;   

  13.   font: 17px/50px Helvetica, Verdana, sans-serif;   

  14.   text-decoration: none;   

  15.   text-align: center;   

  16.   text-transform: uppercase;   

  17.   

  18.   /*GRADIENT*/     

  19.   background: #00b7ea; /* Old browsers */  

  20.   background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */  

  21.   background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */  

  22.   background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */  

  23.   background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */  

  24.   background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */  

  25.   background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */  

  26.   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */  

  27. }   

  28.   

  29. .button01 a, p {   

  30.     -webkit-border-radius: 10px;   

  31.      -moz-border-radius: 10px;   

  32.           border-radius: 10px;   

  33.   

  34.   -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);   

  35.      -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);   

  36.           box-shadow: 2px 2px 8px rgba(0,0,0,0.2);   

  37. }   

  38.   

  39. p {   

  40.   background: #222;   

  41.   display: block;   

  42.   height: 40px;   

  43.   width: 180px;    

  44.   margin: -50px 0 0 10px;   

  45.   

  46.   /*TYPE*/  

  47.   text-align: center;   

  48.   font: 12px/45px Helvetica, Verdana, sans-serif;   

  49.   color: #fff;   

  50.   

  51.   /*POSITION*/  

  52.   position: absolute;   

  53.   z-index: -1;   

  54.   

  55.   /*TRANSITION*/     

  56.   -webkit-transition: margin 0.5s ease;   

  57.      -moz-transition: margin 0.5s ease;   

  58.        -o-transition: margin 0.5s ease;   

  59.       -ms-transition: margin 0.5s ease;   

  60.           transition: margin 0.5s ease;   

  61. }   

  62.   

  63. /*HOVER*/  

  64. .button01:hover .bottombottom {   

  65.   margin: -10px 0 0 10px;   

  66. }   

  67.   

  68. .button01:hover .top {   

  69.   margin: -80px 0 0 10px;   

  70.   line-height: 35px;   

  71. }   

  72.   

  73. /*ACTIVE*/  

  74. .button01 a:active {   

  75.       background: #00b7ea; /* Old browsers */  

  76.       background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */  

  77.       background: -webkit-gradient(linear, left top, left bottombottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */  

  78.       background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */  

  79.       background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */  

  80.       background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */  

  81.       background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */  

  82.       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */  

  83.   

  84. }   

  85.   

  86. .button01:active .bottombottom {   

  87.   margin: -20px 0 0 10px;   

  88. }   

  89.   

  90. .button01:active .top {   

  91.   margin: -70px 0 0 10px;   

  92. }  

“CSS3實(shí)現(xiàn)動(dòng)畫(huà)按鈕代碼分享”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)頁(yè)名稱(chēng)：CSS3實(shí)現(xiàn)動(dòng)畫(huà)按鈕代碼分享
文章位置：http://muchs.cn/article30/jpdgso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、外貿(mào)建站、虛擬主機(jī)、服務(wù)器托管、商城網(wǎng)站、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司