css3實現(xiàn)的動畫按鈕代碼分享

這篇文章主要講解了“css3實現(xiàn)的動畫按鈕代碼分享”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“css3實現(xiàn)的動畫按鈕代碼分享”吧！

成都網(wǎng)站制作、成都網(wǎng)站設(shè)計介紹好的網(wǎng)站是理念、設(shè)計和技術(shù)的結(jié)合。成都創(chuàng)新互聯(lián)公司擁有的網(wǎng)站設(shè)計理念、多方位的設(shè)計風(fēng)格、經(jīng)驗豐富的設(shè)計團(tuán)隊。提供PC端+手機端網(wǎng)站建設(shè)，用營銷思維進(jìn)行網(wǎng)站設(shè)計、采用先進(jìn)技術(shù)開源代碼、注重用戶體驗與SEO基礎(chǔ)，將技術(shù)與創(chuàng)意整合到網(wǎng)站之中，以契合客戶的方式做到創(chuàng)意性的視覺化效果。

今天給大家分享一款純css3實現(xiàn)的動畫按鈕。第一排的按鈕當(dāng)鼠標(biāo)經(jīng)過的背景色動畫切換，圖標(biāo)從右側(cè)飛入，第二排的按鈕當(dāng)鼠標(biāo)經(jīng)過的時候邊框動畫切換，圖標(biāo)右側(cè)飛入，效果非常好，一起看下效果圖：

css3實現(xiàn)的動畫按鈕代碼分享

實現(xiàn)的代碼。

html代碼：

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

  1. <div class="black">  

  2.             <a href="#" class="btn"><span>Become A Member</span> <i>&rarr;</i> </a><a href="#"  

  3.                 class="btn"><span>Support Us</span> <i>&rarr;</i> </a><a href="#" class="btn"><span>  

  4.                     Going Down</span> <i class="down">&rarr;</i> </a><a href="#" class="btn"><span>Sign   

  5.                         Up</span> <i class="up">&rarr;</i> </a>  

  6.         </div>  

  7.         <div class="white">  

  8.   

  9.             <a href="#" class="btn"><span>Become A Member</span> <i>&rarr;</i> </a><a href="#"  

  10.                 class="btn"><span>Support Us</span> <i>&rarr;</i> </a><a href="#" class="btn"><span>  

  11.                     Going Down</span> <i class="down">&rarr;</i> </a><a href="#" class="btn"><span>Sign   

  12.                         Up</span> <i class="up">&rarr;</i> </a>  

  13.         </div>  

css3代碼：

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

  1. body   

  2.         {   

  3.         }   

  4.            

  5.         h2   

  6.         {   

  7.             font-family: "Abril Titling" , Georgia, serif;   

  8.             color: #f9f9f9;   

  9.             letter-spacing: 1px;   

  10.         }   

  11.            

  12.         body div   

  13.         {   

  14.             padding: 60px 0;   

  15.             text-align: center;   

  16.             height: 80px;   

  17.             margin-top: 0;   

  18.         }   

  19.            

  20.         .black  

  21.         {   

  22.             background: #262D28;   

  23.         }   

  24.            

  25.         .white  

  26.         {   

  27.             background: #f9f9f9;   

  28.         }   

  29.            

  30.         a   

  31.         {   

  32.             display: inline-block;   

  33.             margin: 10px;   

  34.         }   

  35.            

  36.         .btn   

  37.         {   

  38.             position: relative;   

  39.             width: 160px;   

  40.             padding: 1.2rem 3rem;   

  41.             border: 1px solid #0AA944;   

  42.             font-size: 15px;   

  43.             text-decoration: none;   

  44.             color: #f9f9f9;   

  45.             font-family: "Tablet Gothic" , sans-serif;   

  46.             text-transform: uppercase;   

  47.             font-weight: 300;   

  48.             letter-spacing: 1.5px;   

  49.             -webkit-transition: all .2s ease-out;   

  50.             -moz-transition: all .2s ease-out;   

  51.             -ms-transition: all .2s ease-out;   

  52.             -o-transition: all .2s ease-out;   

  53.             transition: all .2s ease-out;   

  54.         }   

  55.            

  56.         .white .btn   

  57.         {   

  58.             color: #262D28;   

  59.             border: 2px solid #0AA944;   

  60.         }   

  61.            

  62.         .btn span   

  63.         {   

  64.             position: relative;   

  65.             top: 2px;   

  66.             left: 0;   

  67.             -webkit-transition: all .3s ease-out;   

  68.             -moz-transition: all .3s ease-out;   

  69.             -ms-transition: all .3s ease-out;   

  70.             -o-transition: all .3s ease-out;   

  71.             transition: all .3s ease-out;   

  72.         }   

  73.            

  74.         .btn i   

  75.         {   

  76.             opacity: 0;   

  77.             position: absolute;   

  78.             margin-top: -21px;   

  79.             top: 2.5rem;   

  80.             left: 120%;   

  81.             -webkit-transition: all .3s ease-out;   

  82.             -moz-transition: all .3s ease-out;   

  83.             -ms-transition: all .3s ease-out;   

  84.             -o-transition: all .3s ease-out;   

  85.             transition: all .3s ease-out;   

  86.         }   

  87.            

  88.         .btn:hover   

  89.         {   

  90.             background: rgba(255,255,255, .9);   

  91.             border: 1px solid rgba(0,0,0,1);   

  92.         }   

  93.            

  94.         .white .btn:hover   

  95.         {   

  96.             background: rgba(0,0,0, .02);   

  97.             border: 2px solid rgba(0,0,0,1);   

  98.         }   

  99.            

  100.         .btn:hover span   

  101.         {   

  102.             color: #333;   

  103.             left: -20px;   

  104.         }   

  105.            

  106.         a.btn:hover i   

  107.         {   

  108.             opacity: 1;   

  109.             left: 80%;   

  110.             color: #333;   

  111.             -webkit-transform: scale(1.2);   

  112.         }   

  113.            

  114.         a.btn:hover .up   

  115.         {   

  116.             -webkit-transform: rotate(270deg);   

  117.         }   

  118.            

  119.         a.btn:hover .down   

  120.         {   

  121.             -webkit-transform: rotate(90deg);   

  122.         }  

感謝各位的閱讀，以上就是“css3實現(xiàn)的動畫按鈕代碼分享”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對css3實現(xiàn)的動畫按鈕代碼分享這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

當(dāng)前文章：css3實現(xiàn)的動畫按鈕代碼分享
瀏覽地址：http://muchs.cn/article4/pppooe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、搜索引擎優(yōu)化、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計公司、響應(yīng)式網(wǎng)站

廣告

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

營銷型網(wǎng)站建設(shè)