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

前端  /  管理员 发布于 7年前   307

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

　　实现的代码。

　　html代码：

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

1. <div class="container">  
2.        <a target="_blank" class="btn green" href="https:///"><span>Nominate Yourself</span></a>  
3.        <a target="_blank" class="btn orange" href="https:///"><span>Nominate Someone</span></a>  
4.        <a target="_blank" class="btn blue" href="https:///"><span>Buy Tickets Now</span></a>  
5.    </div>  

　　css3代码：

CSS Code复制内容到剪贴板

1. .btn   
2.         {   
3.             display: inline-block;   
4.             margin: 1em 0;   
5.             padding: 1em 2em;   
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: 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);   
15.         }   
16.         .btn.green span   
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: 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);   
25.         }   
26.         .btn.orange span   
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.blue span   
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.         }   
61.            
62.         *   
63.         {   
64.             -moz-box-sizing: border-box;   
65.             box-sizing: border-box;   
66.         }   
67.            
68.         body   
69.         {   
70.             font: normal 1em 'Helvetica Neue' , Helvetica, sans-serif;   
71.             background: #1d2025;   
72.             -webkit-font-smoothing: antialiased;   
73.             text-rendering: optimizeLegibility;   
74.         }   
75.            
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.         }   
93.            
94.         a   
95.         {   
96.             color: inherit;   
97.             text-decoration: none;   
98.         }   
99.            
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实现的颜色渐变按钮的代码，是不是很漂亮，谢谢阅读，希望能帮到大家，请继续关注AIDI，我们会努力分享更多优秀的文章。