本文将教你怎么在不使用js的前提下，用纯css写一个开关按钮。
效果一
展示地址：http://output.jsbin.com/ritoreh/1
代码如下：
<!DOCTYPE html> <html> <head> <title>纯css编写开关按钮（一）</title> <style type="text/css"> .chooseBtn { display: none; } .choose-label { box-shadow: #ccc 0px 0px 0px 1px; width: 40px; height: 20px; display: inline-block; border-radius: 20px; position: relative; background-color: #bdbdbd; overflow: hidden; } .choose-label:before { content: ''; position: absolute; left: 0; width: 20px; height: 20px; display: inline-block; border-radius: 20px; background-color: #fff; z-index: 20; -webkit-transition: all 0.5s; transition: all 0.5s; } .chooseBtn:checked + label.choose-label:before { left: 20px; } .chooseBtn:checked + label.choose-label { background-color: #51ccee; } </style> </head> <body> <input type="checkbox" name="sex" id="male" class="chooseBtn" /> <label for="male" class="choose-label"></label> </body> </html>
效果二 : 
展示地址：http://output.jsbin.com/vipeci/1
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯css编写开关按钮（二）</title> <style type="text/css"> #toggle-button{ display: none; } .button-label{ position: relative; display: inline-block; width: 80px; height: 30px; background-color: #ccc; box-shadow: #ccc 0px 0px 0px 2px; border-radius: 30px; overflow: hidden; } .circle{ position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 50%; background-color: #fff; } .button-label .text { line-height: 30px; font-size: 18px; text-shadow: 0 0 2px #ddd; } .on { color: #fff; display: none; text-indent: 10px;} .off { color: #fff; display: inline-block; text-indent: 34px;} .button-label .circle{ left: 0; transition: all 0.3s; } #toggle-button:checked + label.button-label .circle{ left: 50px; } #toggle-button:checked + label.button-label .on{ display: inline-block; } #toggle-button:checked + label.button-label .off{ display: none; } #toggle-button:checked + label.button-label{ background-color: #51ccee; } </style> </head> <body> <div class="toggle-button-wrapper"> <input type="checkbox" id="toggle-button" name="switch"> <label for="toggle-button" class="button-label"> <span class="circle"></span> <span class="text on">ON</span> <span class="text off">OFF</span> </label> </div> </body> </html>