码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-08-19 10:47:34      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   java   使用   os   io   for   

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

bubuko.com,布布扣

值得注意三点:

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>

 

Div+Css(2):纯Div+Css制作的漂亮点击按钮和关闭按钮,布布扣,bubuko.com

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

标签:style   blog   color   java   使用   os   io   for   

原文地址:http://www.cnblogs.com/liubeimeng/p/3921433.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!