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

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

aaarticlea/png;base64,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" alt="" />

值得注意三点:

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

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

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

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
     span{
         display: inline-block;
         font-size: 40px;
         font-weight: 700;
         line-height: 40px;
         text-shadow: 0 1px 2px rgba(0,0,0,.1);
         -o-transform: rotate(45deg);
         -moz-transform: rotate(45deg);
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
     }
     button{
         font-size: 24px;
         letter-spacing: 15px;
         cursor: pointer;
         width: 300px;
         height: 44px;
         margin-top: 25px;
         padding: 0;
         background: #ef4300;
         -moz-border-radius: 6px;
         -webkit-border-radius: 6px;
         border-radius: 6px;
         border: 1px solid #ff730e;
         -moz-box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset,
          0 2px 7px 0 rgba(0,0,0,.2);
         -webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset,
          0 2px 7px 0 rgba(0,0,0,.2);
         box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset,
          0 2px 7px 0 rgba(0,0,0,.2);
         font-family: 'PT Sans', Helvetica, Arial, sans-serif;
         font-weight: 700;
         color: #fff;
         text-shadow: 0 1px 2px rgba(0,0,0,.1);
         -o-transition: all .2s;
         -moz-transition: all .2s;
         -webkit-transition: all .2s;
         -ms-transition: all .2s;
     }
     button:hover {
         -moz-box-shadow: 0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);
         -webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);
         box-shadow: 0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);
     }
     </style>
     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
     <script type="text/javascript">
     $("button").click(function(){
          alert("nihao!");

     });
     </script>
 </head>
 <body>
 <span>+</span><br/>
 <button>点击</button>
 </body>
 </html>