首先来看看效果图: HTML 代码就这么简单: 1 | < a href = "#" class = "button green" >button</ a > |
3 | < a href = "#" class = "button blue" >button</ a > |
4 | < a href = "#" class = "button gray" >button</ a > |
如果没有 CSS ,那么上面的 HTML 执行起来是这样的: 开始 CSS3 的编写: 8 | font : bold 12px / 25px Arial , sans-serif ; |
一些不同颜色的按钮样式: 到这一步后按钮看起来是这样的: 接下来开始用 CSS 处理圆角: 02 | display : inline- block ; |
07 | text-decoration : none ; |
08 | font : bold 12px / 25px Arial , sans-serif ; |
10 | text-shadow : 1px 1px 1px rgba( 255 , 255 , 255 , . 22 ); |
12 | -webkit-border-radius: 30px ; |
13 | -moz-border-radius: 30px ; |
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 ); |
20 | -webkit-transition: all 0.15 s ease; |
21 | -moz-transition: all 0.15 s ease; |
22 | -o-transition: all 0.15 s ease; |
23 | -ms-transition: all 0.15 s ease; |
24 | transition: all 0.15 s ease; |
现在的按钮圆润多了,看看: 还不够啊,没有立体效果,再完善完善: 07 | background : -moz-linear-gradient( top , #a5cd4e 0% , #6b8f1a 100% ); |
08 | background : -webkit-gradient(linear, left top , left bottom , color-stop( 0% , #a5cd4e ), color-stop( 100% , #6b8f1a )); |
09 | background : -webkit-linear-gradient( top , #a5cd4e 0% , #6b8f1a 100% ); |
10 | background : -o-linear-gradient( top , #a5cd4e 0% , #6b8f1a 100% ); |
11 | background : -ms-linear-gradient( top , #a5cd4e 0% , #6b8f1a 100% ); |
12 | background : linear-gradient( top , #a5cd4e 0% , #6b8f1a 100% ); |
21 | background : -moz-linear-gradient( top , #70c9e3 0% , #39a0be 100% ); |
22 | background : -webkit-gradient(linear, left top , left bottom , color-stop( 0% , #70c9e3 ), color-stop( 100% , #39a0be )); |
23 | background : -webkit-linear-gradient( top , #70c9e3 0% , #39a0be 100% ); |
24 | background : -o-linear-gradient( top , #70c9e3 0% , #39a0be 100% ); |
25 | background : -ms-linear-gradient( top , #70c9e3 0% , #39a0be 100% ); |
26 | background : linear-gradient( top , #70c9e3 0% , #39a0be 100% ); |
35 | background : -moz-linear-gradient( top , #d3d3d3 0% , #8a8a8a 100% ); |
36 | background : -webkit-gradient(linear, left top , left bottom , color-stop( 0% , #d3d3d3 ), color-stop( 100% , #8a8a8a )); |
37 | background : -webkit-linear-gradient( top , #d3d3d3 0% , #8a8a8a 100% ); |
38 | background : -o-linear-gradient( top , #d3d3d3 0% , #8a8a8a 100% ); |
39 | background : -ms-linear-gradient( top , #d3d3d3 0% , #8a8a8a 100% ); |
40 | background : linear-gradient( top , #d3d3d3 0% , #8a8a8a 100% ); |
现在爽了,漂亮了,你喜欢这样的按钮吗? 为了让按钮更大一点,我们增加了个 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 > |
4 | < a href = "#" class = "button big gray" >sign in < span >One minute</ span ></ a > |
07 | text-transform : uppercase ; |
08 | font : bold 20px / 22px Arial , sans-serif ; |
14 | font : italic normal 12px / 18px Georgia, sans-serif ; |
15 | text-shadow : 1px 1px 1px rgba( 255 , 255 , 255 , . 12 ); |
大按钮的效果: 我们还需要处理下当鼠标移到按钮上方时显示不同的效果: 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 ); |
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 ); |
效果如下: 好了,完美的CSS3按钮解决方案。
|