HTML 代碼就這么簡(jiǎn)單：
1 | <a href="#" class="button green">button</a> |
2 |
3 | <a href="#" class="button blue">button</a> |
4 | <a href="#" class="button gray">button</a> |
如果沒有 CSS ，那么上面的 HTML 執(zhí)行起來是這樣的：
開始 CSS3 的編寫：
1 | .button { |
2 | display: inline-block; |
3 | position: relative; |
4 | margin: 10px; |
5 | padding: 0 20px; |
6 | text-align: center; |
7 | text-decoration: none; |
8 | font: bold 12px/25px Arial, sans-serif; |
9 | } |
一些不同顏色的按鈕樣式：
01 | .green { |
02 | color: #3e5706; |
03 | background: #a5cd4e; |
04 | } |
05 |
06 | /* Blue Color */ |
07 |
08 | .blue { |
09 | color: #19667d; |
10 | background: #70c9e3; |
11 | } |
12 |
13 | /* Gray Color */ |
14 |
15 | .gray { |
16 | color: #515151; |
17 | background: #d3d3d3; |
18 | } |
到這一步后按鈕看起來是這樣的：
接下來開始用 CSS 處理圓角：
01 | .button { |
02 | display: inline-block; |
03 | position: relative; |
04 | margin: 10px; |
05 | padding: 0 20px; |
06 | text-align: center; |
07 | text-decoration: none; |
08 | font: bold 12px/25px Arial, sans-serif; |
09 |
10 | text-shadow: 1px 1px 1px rgba(255,255,255, .22); |
11 |
12 | -webkit-border-radius: 30px; |
13 | -moz-border-radius: 30px; |
14 | border-radius: 30px; |
15 |
16 | -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44); |
17 | -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44); |
18 | box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44); |
19 |
20 | -webkit-transition: all 0.15s ease; |
21 | -moz-transition: all 0.15s ease; |
22 | -o-transition: all 0.15s ease; |
23 | -ms-transition: all 0.15s ease; |
24 | transition: all 0.15s ease; |
25 | } |
現(xiàn)在的按鈕圓潤(rùn)多了，看看：
還不夠啊，沒有立體效果，再完善完善：
01 | /* Green Color */ |
02 |
03 | .green { |
04 | color: #3e5706; |
05 |
06 | background: #a5cd4e; /* Old browsers */ |
07 | background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */ |
08 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */ |
09 | background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */ |
10 | background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */ |
11 | background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */ |
12 | background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* W3C */ |
13 | } |
14 |
15 | /* Blue Color */ |
16 |
17 | .blue { |
18 | color: #19667d; |
19 |
20 | background: #70c9e3; /* Old browsers */ |
21 | background: -moz-linear-gradient(top, #70c9e3 0%, #39a0be 100%); /* FF3.6+ */ |
22 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */ |
23 | background: -webkit-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */ |
24 | background: -o-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */ |
25 | background: -ms-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* IE10+ */ |
26 | background: linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* W3C */ |
27 | } |
28 |
29 | /* Gray Color */ |
30 |
31 | .gray { |
32 | color: #515151; |
33 |
34 | background: #d3d3d3; /* Old browsers */ |
35 | background: -moz-linear-gradient(top, #d3d3d3 0%, #8a8a8a 100%); /* FF3.6+ */ |
36 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */ |
37 | background: -webkit-linear-gradient(top, #d3d3d3 0%,#8a8a8a 100%); /* Chrome10+,Safari5.1+ */ |
38 | background: -o-linear-gradient(top, #d3d3d3 0%,#8a8a8a 100%); /* Opera 11.10+ */ |
39 | background: -ms-linear-gradient(top, #d3d3d3 0%,#8a8a8a 100%); /* IE10+ */ |
40 | background: linear-gradient(top, #d3d3d3 0%,#8a8a8a 100%); /* W3C */ |
41 | } |
現(xiàn)在爽了，漂亮了，你喜歡這樣的按鈕嗎？
為了讓按鈕更大一點(diǎn)，我們?cè)黾恿藗€(gè) big 樣式：
1 | <a href="#" class="button big green">sign in <span>One minute</span></a> |
2 | <a href="#" class="button big blue">sign in <span>One minute</span></a> |
3 |
4 | <a href="#" class="button big gray">sign in <span>One minute</span></a> |
01 | /* Big Button Style */ |
02 |
03 | .big { |
04 | padding: 0 40px; |
05 | padding-top: 10px; |
06 | height: 45px; |
07 | text-transform: uppercase; |
08 | font: bold 20px/22px Arial, sans-serif; |
09 | } |
10 |
11 | .big span { |
12 | display: block; |
13 | text-transform: none; |
14 | font: italic normal 12px/18px Georgia, sans-serif; |
15 | text-shadow: 1px 1px 1px rgba(255,255,255, .12); |
16 | } |
大按鈕的效果：
我們還需要處理下當(dāng)鼠標(biāo)移到按鈕上方時(shí)顯示不同的效果：
01 | .button:hover { |
02 | -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5); |
03 | -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5); |
04 | box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5); |
05 | } |
06 | .button:active { |
07 | -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8); |
08 | -moz-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8); |
09 | box-shadow: inset 0px 0px 3px rgba(0,0,0, .8); |
10 | } |
效果如下：
好了，完美的CSS3按鈕解決方案。
聯(lián)系客服
