Html
    Css
    Js

    
                        
.wrap {
	width:2.625rem;
	height:1.25rem;
}
input {
	display:none;
}
label {
	display:block;
	border:1px solid #888;
	height:1.25rem;
	border-radius:15px;
	transition:.3s;
}
label .move {
	display:block;
	width:1.25rem;
	height:1.25rem;
	border-radius:50%;
	box-shadow:1px 1px 1px #ccc;
	background:#fff;
	transition:.3s;
	overflow:hidden;
}
input:checked+label {
	background:#0092EB;
}
input:checked+label .move {
	transform:translateX(20px);
	box-shadow:none;
}
.move span {
	width:2.5rem;
	display:block;
	height:1.25rem;
	line-height:1.25rem;
	transition:0.3s;
}
input:checked+label .move span {
	transform:translateX(-20px);
}
em {
	text-align:center;
	width:50%;
	font-size:12px;
	font-style:normal;
	float:left;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css3文字按钮开关(原创)

1:transform 属性向元素应用 2d 或 3d 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

<table border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0" wangeditor_table_border_mark="1">
    <tbody>
        <tr>
            <td>translatex(x)</td>
            <td>定义转换,只是用 x 轴的值。</td>
        </tr>
    </tbody>
</table>
<table border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0" wangeditor_table_border_mark="1">
    <tbody>
        <tr>
            <td>translatey(y)</td>
            <td>定义转换,只是用 y 轴的值。</td>
        </tr>
    </tbody>
</table>
0