我认为按钮的绘制分以下三个步骤
第一步，绘制按钮的轮廓
选择合适的html标签，设置轮廓的CSS
/* html代码 */ body{ background-color: #E6C9B6; } /* CSS样式 */ /* 按钮轮廓 */ .button{ display: block; margin:100px auto; position: relative; width:100px; height:40px; border-radius: 50px; border:1px solid #fff; background-color: #E9E4E0; }
效果图
仿IOS-1.jpg
第二步，绘制按钮的默认状态
-
这一步很重要，由于我们不会再给html文件添加其他的标签，所以我们需要用 :after 伪类对按钮进行CSS渲染
立即学习“前端免费学习笔记（深入）”；
/* 接在上面继续写 */ .button:after{ display: block; position: absolute; //相对按钮的轮廓进行决定定位 top:2px; bottom: 2px; //即设置top,又设置bottom使元素自动拉伸到最大 left:2px; //实际上，按钮的宽度即为容器的高度-(top+bottom) width:36px; //按钮的宽度 line-height: 36px; //按钮文字的高度，如果不需要文字，可移除 text-align: center; text-transform: uppercase; font-size: 16px; background-color: #fff; //这里的背景颜色是按钮的背景颜色 border:2px solid; transition: all 500ms; //按钮的动画时长 }实际上，做到这一步之后会发现，在浏览器上的效果没有一点变化，还是之前的那样子，不过不用着急，我们再加一点东西就很明显了
-
在轮廓内添加小按钮
.off:after { content: 'off'; border-radius:30px; color: #999; }默认为off状态
仿IOS-2.jpg
- 再接着绘制要切换的状态
.on:after {
content: 'ON';
border-radius:30px;
transform: translate(56px, 0);
color:transparent;
background-color:#4BD429;
}
仿IOS-3.jpg
-
最后一步，写JS代码进行切换
实际上，在CSS的切换之中，toggleClass是最为方便的。
但是！！！
这种切换方法不能切换你要触发的JS事件，
毕竟，我们画按钮是为了完成某些功能，
所以我采用的是这种方式,但也许并不是最好的var zn=0; $('.button').click(function(e){ if(zn==1){ $(this).removeClass("on").addClass("off"); //此处可填要触发的事件 zn=0; }else{ $(this).removeClass("off").addClass("on"); //此处可填要触发的事件 zn=1; } });到此，一个完整的开关按钮就绘制完成了
感谢你能花3~5分钟的时间阅览我不专业的教程
PS:昨天要绘制一个按钮控制灯泡的开关（实际上就是切换背景图片），然后我四周一看，看到了墙壁上的一个公牛开关，既然是控制电灯的，我就想玩一玩仿真开关，忍着中午的睡意，还真勉强的给绘制出来了
绘制过程并不复杂，我也就不细说了，贴下效果图和代码，感兴趣的可以自行看一下
仿真开关.jpg
仿真-2.jpg
PS:我引用了一个初始化的CSS文件，可能需要 box-sizing:border-box; /* JS代码 */
