CSSで作る。ON/OFFスイッチボタン5選

1. デモ

2. 共通 CSS

ここでは、何種類かのスイッチを作成するために共通 CSS(switch)に class を追加(s1~s5)して CSS の追加、上書きする方法をとっています。

<label>
  <input type="checkbox" class="switch_input" name="" value="" />
  <span class="switch s1"></span>
</label>
.switch_input {
  display: none;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  background: #666;
  cursor: pointer;
  transition: 0.2s;
}
.switch::after {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  transition: 0.2s;
}

3. 角丸スイッチ

.s1 {
  border-radius: 30px;
}
.s1::after {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: solid 3px #666;
  position: absolute;
  top: 0;
  left: 0;
}
.switch_input:checked + .s1 {
  background: #f12549;
}
.switch_input:checked + .s1::after {
  border: solid 3px #f12549;
  left: 30px;
}

疑似要素の::afterが丸い動く部分です。動きの部分は left の位置と transition で動いているようにしているので、位置は left なら left で共通にします。left から right のようにすると transition が効かなくなります。

4. 四角スイッチ

.s2 {
  border-radius: 5px;
}
.s2::after {
  width: 30px;
  height: 30px;
  background: #fff;
  border: solid 3px #666;
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
}
.switch_input:checked + .s2 {
  background: #00ad8e;
}
.switch_input:checked + .s2::after {
  border: solid 3px #00ad8e;
  left: 30px;
}

5. スライダーのようなスイッチ

.s3 {
  height: 10px;
  border-radius: 5px;
}
.s3::after {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: -10px;
  left: 0;
}
.switch_input:checked + .s3 {
  background: #3554dc;
}
.switch_input:checked + .s3::after {
  left: 30px;
}

6. 角丸スイッチ文字入り

.s4 {
  border-radius: 30px;
}
.s4::before {
  content: "OFF";
  font-weight: bold;
  font-size: 10px;
  color: #fff;
  line-height: 30px;
  padding: 0 0 0 32px;
}
.s4::after {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: solid 3px #666;
  position: absolute;
  top: 0;
  left: 0;
}
.switch_input:checked + .s4 {
  background: #832db4;
}
.switch_input:checked + .s4::before {
  content: "ON";
  padding: 0 0 0 10px;
}
.switch_input:checked + .s4::after {
  border: solid 3px #832db4;
  left: 30px;
}

::beforeが ON/OFF の表示。::afterが丸い動く部分の設定。

7. 四角スイッチ文字入り

.s5 {
  background: none;
}
.s5::before,
.s5::after {
  font-weight: bold;
  font-size: 10px;
  line-height: 30px;
  text-align: center;
  display: inline-block;
  width: 30px;
  height: 30px;
}
.s5::before {
  content: "ON";
  color: #aaa;
  border-radius: 5px 0 0 5px;
  background: #fff;
}
.s5::after {
  content: "OFF";
  border-radius: 0 5px 5px 0;
  color: #000;
  background: #f0d118;
}
.switch_input:checked + .s5::before {
  background: #f0d118;
  color: #000;
}
.switch_input:checked + .s5::after {
  background: #fff;
  color: #aaa;
}

*このボタンだけは、共通 CSS がなくても機能します。