一款基于css3的动画按钮代码好代码教程

网络
在岁月中跋涉，每个人都有自己的故事，看淡心境才会秀丽，看开心情才会明媚。累时歇一歇，随清风漫舞，烦时静一静，与花草凝眸，急时缓一缓，和自己微笑。

　　之前为大家分享了很多款纯css3实现的实用按钮。今天给大家带来一款基于css3的动画按钮。实现的效果图如下：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass="share-buttons">
  2. <divclass="share-button">
  3. <divclass="share-button-secondary">
  4. <divclass="share-button-secondary-content">
  5. shareontwitter
  6. </div>
  7. </div>
  8. <divclass="share-button-primary">
  9. <iclass="share-button-iconfafa-twitter"></i>
  10. </div>
  11. </div>
  12. <divclass="share-button">
  13. <divclass="share-button-secondary">
  14. <divclass="share-button-secondary-content">
  15. shareonfacebook
  16. </div>
  17. </div>
  18. <divclass="share-button-primary">
  19. <iclass="share-button-iconfafa-facebook"></i>
  20. </div>
  21. </div>
  22. <divclass="share-button">
  23. <divclass="share-button-secondary">
  24. <divclass="share-button-secondary-content">
  25. pinonpinterest
  26. </div>
  27. </div>
  28. <divclass="share-button-primary">
  29. <iclass="share-button-iconfafa-pinterest"></i>
  30. </div>
  31. </div>
  32. <divclass="share-button">
  33. <divclass="share-button-secondary">
  34. <divclass="share-button-secondary-content">
  35. shareontumblr
  36. </div>
  37. </div>
  38. <divclass="share-button-primary">
  39. <iclass="share-button-iconfafa-tumblr"></i>
  40. </div>
  41. </div>
  42. <divclass="share-button">
  43. <divclass="share-button-secondary">
  44. <divclass="share-button-secondary-content">
  45. shareongoogle+
  46. </div>
  47. </div>
  48. <divclass="share-button-primary">
  49. <iclass="share-button-iconfafa-google-plus"></i>
  50. </div>
  51. </div>
  52. </div>

　　css3代码：

CSS Code复制内容到剪贴板
  1. body
  2. {
  3. background:-webkit-linear-gradient(0deg,#FF800810%,#FFC83790%);
  4. background:linear-gradient(90deg,#FF800810%,#FFC83790%);
  5. padding:2em;
  6. text-align:center;
  7. }
  9. *
  10. {
  11. -moz-box-sizing:border-box;
  12. box-sizing:border-box;
  13. }
  15. .share-buttons
  16. {
  17. position:absolute;
  18. width:300px;
  19. height:212px;
  20. padding-left:135px;
  21. top:50%;
  22. left:50%;
  23. margin-left:-150px;
  24. margin-top:-106px;
  25. }
  26. .share-buttons.share-button
  27. {
  28. float:left;
  29. margin-top:15px;
  30. }
  31. .share-buttons.share-button:first-child
  32. {
  33. margin-top:0;
  34. }
  35. .share-buttons.share-button:after
  36. {
  37. clear:both;
  38. display:table;
  39. }
  41. .share-button
  42. {
  43. display:block;
  44. position:relative;
  45. height:30px;
  46. }
  47. .share-button:hover
  48. {
  49. cursor:pointer;
  50. }
  51. .share-button:hover.share-button-primary
  52. {
  53. box-shadow:1px000rgba(0,0,0,0.1);
  54. }
  55. .share-button:hover.share-button-secondary-content
  56. {
  57. -webkit-transform:translate3d(0,0,0);
  58. transform:translate3d(0,0,0);
  59. }
  61. .share-button-primary
  62. {
  63. position:absolute;
  64. background:#fff;
  65. width:30px;
  66. height:30px;
  67. border-radius:15px;
  68. left:0;
  69. top:50%;
  70. margin-top:-15px;
  71. }
  73. .share-button-icon
  74. {
  75. display:block;
  76. color:#242424;
  77. position:absolute;
  78. width:30px;
  79. line-height:30px;
  80. font-size:16px;
  81. margin-top:1px;
  82. }
  84. .share-button-secondary
  85. {
  86. overflow:hidden;
  87. margin-left:15px;
  88. height:30px;
  89. }
  91. .share-button-secondary-content
  92. {
  93. font-family:sans-serif;
  94. font-size:.75em;
  95. background:#fff;
  96. display:block;
  97. height:30px;
  98. text-align:left;
  99. padding-left:24px;
  100. padding-right:18px;
  101. line-height:30px;
  102. color:#242424;
  103. border-radius:015px15px0;
  104. -webkit-transform:translate3d(-100%,0,0);
  105. transform:translate3d(-100%,0,0);
  106. -webkit-transition:-webkit-transform175msease;
  107. transition:transform175msease;
  108. }
    109. 　　

　相关推荐：

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

　　一款纯css3实现的颜色渐变按钮的代码好代码教程

　　一款纯css3实现的鼠标经过按钮特效好代码教程

　　利用css3实现的简单的鼠标悬停按钮

　　纯CSS3发光分享按钮的实现好代码教程

　　五款漂亮的纯CSS3动画按钮的实例好代码教程

本文一款基于css3的动画按钮代码好代码教程到此结束。不要忘记为自己，为爱自己的人而活……小编再次感谢大家对我们的支持！