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

互联网
生活没有真正的完美，只有不完美才是最真实的美；生活没有一帆风顺的，只有披荆斩棘才能路路顺；生活没有永远的成功，只有在挫折中站起才是真正的成功，只有闪光的人生才算是生命的永恒。

　　之前为大家分享很多纯css3实现的实用按钮，今天给大家带来一款纯css3实现的颜色渐变按钮。这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变，效果非常好看，一起看下效果图：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass="container">
  2. <atarget="_blank"class="btngreen"rel="nofollow noopener noreferrer" href="https://www.haodaima.com/"><span>NominateYourself</span></a>
  3. <atarget="_blank"class="btnorange"rel="nofollow noopener noreferrer" href="https://www.haodaima.com/"><span>NominateSomeone</span></a>
  4. <atarget="_blank"class="btnblue"rel="nofollow noopener noreferrer" href="https://www.haodaima.com/"><span>BuyTicketsNow</span></a>
  5. </div>

　　css3代码：

CSS Code复制内容到剪贴板
  1. .btn
  2. {
  3. display:inline-block;
  4. margin:1em0;
  5. padding:1em2em;
  6. background:transparent;
  7. border:2px;
  8. border-radius:3px;
  9. font-weight:400;
  10. text-align:center;
  11. }
  12. .btn.green
  13. {
  14. box-shadow:01px01pxrgba(43,220,146,0.25),0-1px01pxrgba(129,214,106,0.25),1px001pxrgba(43,220,146,0.25),-1px001pxrgba(129,214,106,0.25),1px-1px01pxrgba(86,217,126,0.5),-1px1px01pxrgba(86,217,126,0.5),1px1px01pxrgba(0,223,166,0.75),-1px-1px01pxrgba(173,211,86,0.75);
  15. }
  16. .btn.greenspan
  17. {
  18. background:-webkit-linear-gradient(left,#add356,#00dfa6);
  19. -webkit-background-clip:text;
  20. -webkit-text-fill-color:transparent;
  21. }
  22. .btn.orange
  23. {
  24. box-shadow:01px01pxrgba(255,102,43,0.25),0-1px01pxrgba(255,169,69,0.25),1px001pxrgba(255,102,43,0.25),-1px001pxrgba(255,169,69,0.25),1px-1px01pxrgba(255,136,56,0.5),-1px1px01pxrgba(255,136,56,0.5),1px1px01pxrgba(255,69,31,0.75),-1px-1px01pxrgba(255,203,82,0.75);
  25. }
  26. .btn.orangespan
  27. {
  28. background:-webkit-linear-gradient(left,#ffcb52,#ff451f);
  29. -webkit-background-clip:text;
  30. -webkit-text-fill-color:transparent;
  31. }
  32. .btn.blue
  33. {
  34. -webkit-border-image:-webkit-linear-gradient(left,#3dade9,#bf2fcb)round;
  35. border-image-slice:1;
  36. }
  37. .btn.bluespan
  38. {
  39. background:-webkit-linear-gradient(left,#3dade9,#bf2fcb);
  40. -webkit-background-clip:text;
  41. -webkit-text-fill-color:transparent;
  42. }
  43. .btn:nth-of-type(1)
  44. {
  45. float:left;
  46. }
  47. .btn:nth-of-type(2)
  48. {
  49. float:rightright;
  50. }
  51. .btn:nth-of-type(3)
  52. {
  53. width:100%;
  54. clear:left;
  55. padding:.75em;
  56. font-size:3em;
  57. font-weight:100;
  58. line-height:1;
  59. letter-spacing:1px;
  60. }
  62. *
  63. {
  64. -moz-box-sizing:border-box;
  65. box-sizing:border-box;
  66. }
  68. body
  69. {
  70. font:normal1em'HelveticaNeue',Helvetica,sans-serif;
  71. background:#1d2025;
  72. -webkit-font-smoothing:antialiased;
  73. text-rendering:optimizeLegibility;
  74. }
  76. .container
  77. {
  78. width:60%;
  79. margin:auto;
  80. position:absolute;
  81. top:50%;
  82. left:50%;
  83. -webkit-transform:translate(-50%,-50%);
  84. -ms-transform:translate(-50%,-50%);
  85. transform:translate(-50%,-50%);
  86. }
  87. .container:after
  88. {
  89. display:table;
  90. content:'';
  91. clear:both;
  92. }
  94. a
  95. {
  96. color:inherit;
  97. text-decoration:none;
  98. }
  100. h1.method1
  101. {
  102. background:-webkit-linear-gradient(left,#ef0,#f00);
  103. -webkit-background-clip:text;
  104. -webkit-text-fill-color:transparent;
  105. }

　　以上就是今天给大家带来一款纯css3实现的颜色渐变按钮的代码，是不是很漂亮，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。

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