欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純css3實現(xiàn)的動畫按鈕的實例教程

  發(fā)布時間：2014-11-17 10:12:25   作者：佚名   我要評論
這篇文章主要為大家介紹了一款動畫按鈕，只利用css3就可以完成，第一排的按鈕當鼠標經(jīng)過的背景色動畫切換，圖標從右側(cè)飛入，第二排的按鈕當鼠標經(jīng)過的時候邊框動畫切換，圖標右側(cè)飛入，效果非常好，需要的朋友可以參考下

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

　　實現(xiàn)的代碼。

　　html代碼：

XML/HTML Code復制內(nèi)容到剪貼板
  1. <div class="black">  
  2.             <a href="#" class="btn"><span>Become A Member</span> <i>→</i> </a><a href="#"  
  3.                 class="btn"><span>Support Us</span> <i>→</i> </a><a href="#" class="btn"><span>  
  4.                     Going Down</span> <i class="down">→</i> </a><a href="#" class="btn"><span>Sign   
  5.                         Up</span> <i class="up">→</i> </a>  
  6.         </div>  
  7.         <div class="white">  
  8.   
  9.             <a href="#" class="btn"><span>Become A Member</span> <i>→</i> </a><a href="#"  
  10.                 class="btn"><span>Support Us</span> <i>→</i> </a><a href="#" class="btn"><span>  
  11.                     Going Down</span> <i class="down">→</i> </a><a href="#" class="btn"><span>Sign   
  12.                         Up</span> <i class="up">→</i> </a>  
  13.         </div>  

　　css3代碼：

CSS Code復制內(nèi)容到剪貼板
  1. body   
  2.         {   
  3.         }   
  4.            
  5.         h1   
  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)的動畫按鈕的全部代碼，　謝謝閱讀，希望能幫到大家，請繼續(xù)關注腳本之家，我們會努力分享更多優(yōu)秀的文章。

相關文章

  • CSS3實現(xiàn)帶網(wǎng)站Logo小圖標的各大網(wǎng)站分享按鈕源碼

    今天介紹一款非常強大的CSS3各大網(wǎng)站分享按鈕，非常多的按鈕，基本上一些國外的社交網(wǎng)站都有。另外，這款CSS3分享按鈕還帶有社交網(wǎng)站的Logo小圖標，外觀非常漂亮。
    2014-12-23

  • jQuery/CSS3實現(xiàn)超酷的分享按鈕源碼

    今天要分享的這款分享按鈕是基于CSS和jQuery的，按鈕比較大，非常大氣。鼠標移動到左側(cè)的圖標上就可以在右側(cè)顯示對應的分享按鈕小圖標，且小圖標伴有鼠標滑過的放大顯示特
    2014-12-23

  • 純css3實現(xiàn)的鼠標懸停動畫按鈕

    這篇文章主要介紹了純css3實現(xiàn)的鼠標懸停動畫按鈕,需要的朋友可以參考下
    2014-12-23

  • 一款基于css3的動畫按鈕代碼教程

    腳本之家之前為大家分享了很多款純css3實現(xiàn)的實用按鈕。今天給大家?guī)硪豢罨赾ss3的動畫按鈕。很漂亮交互性也很好，需要的朋友可以參考下
    2014-11-23

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

    今天我們來分享五款很不錯的CSS3按鈕動畫，每一種都是鼠標滑過動畫形式，雖然這些動畫按鈕不是十分華麗，但是小編覺得不像其他按鈕那樣很難擴展，我們可以修改CSS代碼隨意
    2014-11-21

  • 純CSS3實現(xiàn)的帶Tooltip提示框的按鈕特效源碼

    今天我向大家分享一款有特色的CSS3按鈕，該按鈕帶有Tooltip功能，鼠標滑過按鈕時即可顯示Tooltip，另外按鈕還有一個漂亮的圖標
    2014-11-19

  • CSS3 實現(xiàn)一組質(zhì)感細膩絲滑的按鈕

    CSS3 引入了眾多供功能強大的新特性，讓設計和開發(fā)人員能夠輕松的創(chuàng)作出各種精美的界面效果。下面這些發(fā)出閃亮光澤的按鈕，很漂亮吧？把鼠標懸停在按鈕上，還有動感的光澤
    2015-08-19

最新評論