Div+Css(2):纯Div+Css制作的漂亮点击按钮和关闭按钮

浏览数：26 / 时间：2015年06月09日

纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.

值得注意三点:

1.其中,主要使用了rotate.它能让文字旋转角度

2.还有radius,做圆角专用,很好用的属性.给想我这样的人省去了作图的时间.

3.W3C标准中对CSS3的transition这是样描述的:"CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。"

 1 <!doctype html>
 2 <html lang="en"> 
 3 <head> 
 4     <meta charset="UTF-8"> 
 5     <title></title> 
 6     <style type="text/css">
 7     span{
 8         display: inline-block;
 9         font-size: 40px;
10         font-weight: 700;
11         line-height: 40px;
12         text-shadow: 0 1px 2px rgba(0,0,0,.1);
13         -o-transform: rotate(45deg);
14         -moz-transform: rotate(45deg);
15         -webkit-transform: rotate(45deg);
16         -ms-transform: rotate(45deg);
17     }
18     button{
19         font-size: 24px;
20         letter-spacing: 15px;
21         cursor: pointer;
22         width: 300px;
23         height: 44px;
24         margin-top: 25px;
25         padding: 0;
26         background: #ef4300;
27         -moz-border-radius: 6px;
28         -webkit-border-radius: 6px;
29         border-radius: 6px;
30         border: 1px solid #ff730e;
31         -moz-box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset,
32          0 2px 7px 0 rgba(0,0,0,.2);
33         -webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset,
34          0 2px 7px 0 rgba(0,0,0,.2);
35         box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset,
36          0 2px 7px 0 rgba(0,0,0,.2);
37         font-family: ‘PT Sans‘, Helvetica, Arial, sans-serif;
38         font-weight: 700;
39         color: #fff;
40         text-shadow: 0 1px 2px rgba(0,0,0,.1);
41         -o-transition: all .2s;
42         -moz-transition: all .2s;
43         -webkit-transition: all .2s;
44         -ms-transition: all .2s;
45     }
46     button:hover {
47         -moz-box-shadow: 0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);
48         -webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);
49         box-shadow: 0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);
50     }
51     </style>
52     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
53     <script type="text/javascript">
54     $("button").click(function(){
55          alert("nihao!");
56 
57     });
58     </script>
59 </head>
60 <body>
61 <span>+</span><br/>
62 <button>点击</button>
63 </body>
64 </html>