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

　　实现的代码。

　　html代码：

XML/HTML Code 复制内容到剪贴板 <div class="container">           < a   target = "_blank"   class = "btn green"   href = "https://www.jb51.net/" > < span > Nominate Yourself </ span > </ a >            < a   target = "_blank"   class = "btn orange"   href = "https://www.jb51.net/" > < span > Nominate Someone </ span > </ a >            < a   target = "_blank"   class = "btn blue"   href = "https://www.jb51.net/" > < span > Buy Tickets Now </ span > </ a >        </ div >   

　　css3代码：

CSS Code 复制内容到剪贴板 .btn            {                 display :  inline - block ;                 margin : 1em 0;                 padding : 1em 2em;                 background :  transparent ;                 border :  2px ;                 border -radius:  3px ;                 font-weight : 400;                 text-align :  center ;            }            .btn. green            {                box-shadow: 0  1px  0  1px  rgba(43, 220, 146, 0.25), 0 - 1px  0  1px  rgba(129, 214, 106, 0.25),  1px  0 0  1px  rgba(43, 220, 146, 0.25), - 1px  0 0  1px  rgba(129, 214, 106, 0.25),  1px  - 1px  0  1px  rgba(86, 217, 126, 0.5), - 1px   1px  0  1px  rgba(86, 217, 126, 0.5),  1px   1px  0  1px  rgba(0, 223, 166, 0.75), - 1px  - 1px  0  1px  rgba(173, 211, 86, 0.75);            }            .btn. green  span            {                 background : -webkit-linear-gradient( left ,  #add356 ,  #00dfa6 );                -webkit- background - clip : text;                -webkit-text-fill- color :  transparent ;            }            .btn.orange            {                box-shadow: 0  1px  0  1px  rgba(255, 102, 43, 0.25), 0 - 1px  0  1px  rgba(255, 169, 69, 0.25),  1px  0 0  1px  rgba(255, 102, 43, 0.25), - 1px  0 0  1px  rgba(255, 169, 69, 0.25),  1px  - 1px  0  1px  rgba(255, 136, 56, 0.5), - 1px   1px  0  1px  rgba(255, 136, 56, 0.5),  1px   1px  0  1px  rgba(255, 69, 31, 0.75), - 1px  - 1px  0  1px  rgba(255, 203, 82, 0.75);            }            .btn.orange span            {                 background : -webkit-linear-gradient( left ,  #ffcb52 ,  #ff451f );                -webkit- background - clip : text;                -webkit-text-fill- color :  transparent ;            }            .btn. blue            {                -webkit- border -image: -webkit-linear-gradient( left ,  #3dade9 ,  #bf2fcb ) round;                 border -image-slice: 1;            }            .btn. blue  span            {                 background : -webkit-linear-gradient( left ,  #3dade9 ,  #bf2fcb );                -webkit- background - clip : text;                -webkit-text-fill- color :  transparent ;            }            .btn:nth-of-type(1)            {                 float :  left ;            }            .btn:nth-of-type(2)            {                 float :  right right ;            }            .btn:nth-of-type(3)            {                 width : 100%;                 clear :  left ;                 padding : .75em;                 font-size : 3em;                 font-weight : 100;                 line-height : 1;                 letter-spacing :  1px ;            }                        *            {                -moz-box-sizing:  border -box;                box-sizing:  border -box;            }                        body            {                 font :  normal  1em  'Helvetica Neue'  ,  Helvetica ,  sans-serif ;                 background :  #1d2025 ;                -webkit- font -smoothing: antialiased;                text-rendering: optimizeLegibility;            }                        .container            {                 width : 60%;                 margin :  auto ;                 position :  absolute ;                 top : 50%;                 left : 50%;                -webkit-transform: translate(-50%, -50%);                -ms-transform: translate(-50%, -50%);                transform: translate(-50%, -50%);            }            .container:after            {                 display : table;                 content :  '' ;                 clear :  both ;            }                        a            {                 color : inherit;                 text-decoration :  none ;            }                        h1.method1            {                 background : -webkit-linear-gradient( left ,  #ef0 ,  #f00 );                -webkit- background - clip : text;                -webkit-text-fill- color :  transparent ;            }  

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