HTML结构
该滑动按钮的基本HTML结构使用一个<label>元素来包裹一个<input>元素和2个<span>元素。span.text-switch是按钮上的文字和背景，span.toggle-btn是滑动的按钮。
<label class="switch-btn">
<input class="checked-switch" type="checkbox" />
<span class="text-switch" data-yes="yes" data-no="no"></span>
<span class="toggle-btn"></span>
</label>
|
CSS样式
整个滑动按钮设置固定的宽度和高度，并设置一定的圆角，采用相对定位方式：
.switch-btn {
position: relative;
display: block;
vertical-align: top;
width: 80px;
height: 30px;
border-radius: 18px;
cursor: pointer;
}
|
input元素使用绝对定位，它位于父元素的左上角位置，并将它的透明度设置为0，使其不可见。
.checked-switch {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
|
.text-switch是按钮上的背景和文字。它和父元素具有相同的高度和圆角。带第一个DEMO中，开始时为它设置红色的背景和深红色的边框，以及白色的文字，并将文字转换为大写形式。
.text-switch {
background-color: #ed5b49;
border: 1px solid #d2402e;
border-radius: inherit;
color: #fff;
display: block;
font-size: 15px;
height: inherit;
position: relative;
text-transform: uppercase;
}
|
滑动按钮上的ON/OFF文本使用.text-switch的:before和:after伪元素来制作。
.text-switch:before,
.text-switch:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.text-switch:before {
content: attr(data-no);
right: 11px;
}
.text-switch:after {
content: attr(data-yes);
left: 11px;
color: #FFFFFF;
opacity: 0;
}
|
为了在用户点击滑动按钮时产生效果，这里使用了checkbox hack技术。在.checked-switch被选中的时候，修改.text-switch的背景色和边框颜色。并将.text-switch元素的:before伪元素的透明度修改为0，将其隐藏。同时将:after伪元素的透明度设置为1，显示不同的文本。
.checked-switch:checked ~ .text-switch {
background-color: #00af2c;
border: 1px solid #068506;
}
.checked-switch:checked ~ .text-switch:before {
opacity: 0;
}
.checked-switch:checked ~ .text-switch:after {
opacity: 1;
}
|
滑动的圆形按钮的制作方法基本相同：
.toggle-btn {
background: linear-gradient(#eee, #fafafa);
border-radius: 100%;
height: 28px;
left: 1px;
position: absolute;
top: 1px;
width: 28px;
}
.toggle-btn::before {
color: #aaaaaa; content: "|||";
display: inline-block;
font-size: 12px;
letter-spacing: -2px;
padding: 4px 0;
vertical-align: middle;
}
.checked-switch:checked ~ .toggle-btn {
left: 51px;
}
.text-switch, .toggle-btn {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
|