1，中间圆点用到css3的gradient属性
2，运动用到css3的transition属性
3，需要写各个浏览器的兼容
代码如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css3按钮</title> 6 </head> 7 <style type="text/css"> 8 .btn{ 9 width: 100px; 10 height: 30px; 11 background: orange; 12 border-radius: 20px; 13 position: relative; 14 15 } 16 .btn input{ 17 width:100%; 18 height: 100%; 19 opacity: 0; 20 cursor: pointer; 21 } 22 .btn label{ 23 display: block; 24 width: 20px; 25 height: 20px; 26 background: -webkit-linear-gradient(top,#fff,#ccc); 27 background: -moz-linear-gradient(top,#fff,#ccc); 28 background: -ms-linear-gradient(top,#fff,#ccc); 29 background: -o-linear-gradient(top,#fff,#ccc); 30 position: absolute; 31 left: 10px; 32 top:5px; 33 -webkit-transition:all .2s linear; 34 -moz-transition:all .2s linear; 35 -ms-transition:all .2s linear; 36 -o-transition:all .2s linear; 37 transition:all .2s linear; 38 cursor: pointer; 39 border-radius: 50%; 40 } 41 .btn input:checked+label{ 42 left: 70px; 43 } 44 </style> 45 <body> 46 <div class="btn"> 47 <input type="checkbox" id="forbtn"> 48 <label for="forbtn"></label> 49 </div> 50 </body> 51 </html>
.btn input:checked+label表示在input选中的时候它后面的label标签定义样式。