5种纯CSS状态切换按钮开关

CSS均写在页面的head部分，通过:before和:after的CSS选择器来切换按钮的不同状态，可以自定义元素的属性data-tg-off和data-tg-on，部分CSS代码如下：

.tgl-flip + .tgl-btn:after {
  content: attr(data-tg-on);
  background: #02C66F;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
.tgl-flip + .tgl-btn:before {
  background: #FF3A19;
  content: attr(data-tg-off);
}

这些按钮实际上是checkbox和label的组合，部分代码如下：

<li class="tg-list-item">
    <h4>翻转</h4>
    <input class="tgl tgl-flip" id="cb5" type="checkbox"/>
    <label class="tgl-btn" data-tg-off="关" data-tg-on="开" for="cb5"></label>
  </li>