純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>