css3制作滚动按钮

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标签定义样式。