css3-开关

#switch-button{ display: none; }
		#switch-button:checked + label.switch-label .circle{left: 35px;}
        #switch-button:checked + label.switch-label .on{ display: inline-block;}
        #switch-button:checked + label.switch-label .off{ display: none; }
        #switch-button:checked + label.switch-label{ background-color: #8BDF4E;}
        			
		#switch-button1{ display: none; }
		#switch-button1:checked + label.switch-label .circle{left: 35px;}
        #switch-button1:checked + label.switch-label .on{ display: inline-block;}
        #switch-button1:checked + label.switch-label .off{ display: none; }
        #switch-button1:checked + label.switch-label{ background-color: #8BDF4E;}
        .switch-label{
        	position: relative;
        	top:6px;
        	display: inline-block; 
        	width:50px;
        	height:15px;
        	line-height:15px;
            background-color: #DDDDDD;
            box-shadow: #DDDDDD 0px 0px 0px 1px;
            border-radius: 30px;
            overflow: hidden;
        }
        .switch-label .circle{position: absolute;top: 0;left: 0;width:15px;height:15px;border-radius: 50%;background-color: #fff;transition: all 0.3s;}
        .switch-label .text {line-height: 15px;font-size: 10px;text-shadow: 0 0 2px #ddd;}
        .switch-label .on { color: #fff; display: none; text-indent:-5px;}
        .switch-label .off { color: #fff; display: inline-block; text-indent:20px;}

　　

<div class="switch-con">
    <input type="checkbox" class="switch-button" class="switch-button" id="switch-button" name="switch">
    <label for="switch-button" class="switch-label">
        <span class="circle"></span>
        <span class="text on">ON</span>
        <span class="text off">OFF</span>
    </label>
</div>