平武建站

css3实现的动画按钮代码分享

这篇文章主要讲解了“css3实现的动画按钮代码分享”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css3实现的动画按钮代码分享”吧！

成都网站制作、成都网站设计介绍好的网站是理念、设计和技术的结合。成都创新互联公司拥有的网站设计理念、多方位的设计风格、经验丰富的设计团队。提供PC端+手机端网站建设，用营销思维进行网站设计、采用先进技术开源代码、注重用户体验与SEO基础，将技术与创意整合到网站之中，以契合客户的方式做到创意性的视觉化效果。

今天给大家分享一款纯css3实现的动画按钮。第一排的按钮当鼠标经过的背景色动画切换，图标从右侧飞入，第二排的按钮当鼠标经过的时候边框动画切换，图标右侧飞入，效果非常好，一起看下效果图：

css3实现的动画按钮代码分享

实现的代码。

html代码：

XML/HTML Code复制内容到剪贴板

  1.   

  2.             Become A Member → 

  3.                 class="btn">Support Us →   

  4.                     Going Down → Sign   

  5.                         Up →   

  6.         

  

  •           

  •   

  •             Become A Member → 

  •                 class="btn">Support Us →   

  •                     Going Down → Sign   

  •                         Up →   

  •         

    •   

    css3代码：

    CSS Code复制内容到剪贴板

    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实现的动画按钮代码分享”的内容了，经过本文的学习后，相信大家对css3实现的动画按钮代码分享这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


    名称栏目：css3实现的动画按钮代码分享
    文章出自：http://pwwzsj.com/article/pppooe.html

    其他资讯