1，中间圆点用到css3的gradient属性
2，运动用到css3的transition属性
3，需要写各个浏览器的兼容
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3按钮</title>
</head>
<style type="text/css">
.btn{
width: 100px;
height: 30px;
background: orange;
border-radius: 20px;
position: relative; }
.btn input{
width:100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.btn label{
display: block;
width: 20px;
height: 20px;
background: -webkit-linear-gradient(top,#fff,#ccc);
background: -moz-linear-gradient(top,#fff,#ccc);
background: -ms-linear-gradient(top,#fff,#ccc);
background: -o-linear-gradient(top,#fff,#ccc);
position: absolute;
left: 10px;
top:5px;
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
-ms-transition:all .2s linear;
-o-transition:all .2s linear;
transition:all .2s linear;
cursor: pointer;
border-radius: 50%;
}
.btn input:checked+label{
left: 70px;
}
</style>
<body>
<div class="btn">
<input type="checkbox" id="forbtn">
<label for="forbtn"></label>
</div>
</body>
</html>
.btn input:checked+label表示在input选中的时候它后面的label标签定义样式。