纯css3如何实现的动画按钮的实例好代码教程

互联网
一旦有人认为你混得不错，你就必须得混好。很多情况下，人真的不是为自己而活。

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass="black">
  2. <arel="nofollow noopener noreferrer" href="#"class="btn"><span>BecomeAMember</span><i>→</i></a><arel="nofollow noopener noreferrer" href="#"
  3. class="btn"><span>SupportUs</span><i>→</i></a><arel="nofollow noopener noreferrer" href="#"class="btn"><span>
  4. GoingDown</span><iclass="down">→</i></a><arel="nofollow noopener noreferrer" href="#"class="btn"><span>Sign
  5. Up</span><iclass="up">→</i></a>
  6. </div>
  7. <divclass="white">
  9. <arel="nofollow noopener noreferrer" href="#"class="btn"><span>BecomeAMember</span><i>→</i></a><arel="nofollow noopener noreferrer" href="#"
  10. class="btn"><span>SupportUs</span><i>→</i></a><arel="nofollow noopener noreferrer" href="#"class="btn"><span>
  11. GoingDown</span><iclass="down">→</i></a><arel="nofollow noopener noreferrer" href="#"class="btn"><span>Sign
  12. Up</span><iclass="up">→</i></a>
  13. </div>

　　css3代码：

CSS Code复制内容到剪贴板
  1. body
  2. {
  3. }
  5. h1
  6. {
  7. font-family:"AbrilTitling",Georgia,serif;
  8. color:#f9f9f9;
  9. letter-spacing:1px;
  10. }
  12. bodydiv
  13. {
  14. padding:60px0;
  15. text-align:center;
  16. height:80px;
  17. margin-top:0;
  18. }
  20. .black
  21. {
  22. background:#262D28;
  23. }
  25. .white
  26. {
  27. background:#f9f9f9;
  28. }
  30. a
  31. {
  32. display:inline-block;
  33. margin:10px;
  34. }
  36. .btn
  37. {
  38. position:relative;
  39. width:160px;
  40. padding:1.2rem3rem;
  41. border:1pxsolid#0AA944;
  42. font-size:15px;
  43. text-decoration:none;
  44. color:#f9f9f9;
  45. font-family:"TabletGothic",sans-serif;
  46. text-transform:uppercase;
  47. font-weight:300;
  48. letter-spacing:1.5px;
  49. -webkit-transition:all.2sease-out;
  50. -moz-transition:all.2sease-out;
  51. -ms-transition:all.2sease-out;
  52. -o-transition:all.2sease-out;
  53. transition:all.2sease-out;
  54. }
  56. .white.btn
  57. {
  58. color:#262D28;
  59. border:2pxsolid#0AA944;
  60. }
  62. .btnspan
  63. {
  64. position:relative;
  65. top:2px;
  66. left:0;
  67. -webkit-transition:all.3sease-out;
  68. -moz-transition:all.3sease-out;
  69. -ms-transition:all.3sease-out;
  70. -o-transition:all.3sease-out;
  71. transition:all.3sease-out;
  72. }
  74. .btni
  75. {
  76. opacity:0;
  77. position:absolute;
  78. margin-top:-21px;
  79. top:2.5rem;
  80. left:120%;
  81. -webkit-transition:all.3sease-out;
  82. -moz-transition:all.3sease-out;
  83. -ms-transition:all.3sease-out;
  84. -o-transition:all.3sease-out;
  85. transition:all.3sease-out;
  86. }
  88. .btn:hover
  89. {
  90. background:rgba(255,255,255,.9);
  91. border:1pxsolidrgba(0,0,0,1);
  92. }
  94. .white.btn:hover
  95. {
  96. background:rgba(0,0,0,.02);
  97. border:2pxsolidrgba(0,0,0,1);
  98. }
  100. .btn:hoverspan
  101. {
  102. color:#333;
  103. left:-20px;
  104. }
  106. a.btn:hoveri
  107. {
  108. opacity:1;
  109. left:80%;
  110. color:#333;
  111. -webkit-transform:scale(1.2);
  112. }
  114. a.btn:hover.up
  115. {
  116. -webkit-transform:rotate(270deg);
  117. }
  119. a.btn:hover.down
  120. {
  121. -webkit-transform:rotate(90deg);
  122. }

　以上就是今天给大家分享一款纯css3实现的动画按钮的全部代码，　谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例