checkboxを利用したtoggleボタンをCSSだけで作ります。初期は赤色の円が左側、クリックするとchecked状態になり、円は青色になり右側に移動します。ボタンの下側にこのボタンの状態をテキストの色名で表示します。色名テキストは、p要素の子要素に対して:before疑似要素で、予期の「赤色」を表示し、checked状態の時、label .input:checked の間接セレクタで、「青色」と書き換えています。また、この色名部分をクリックして、ボタンをtoggleすることも可能（ブラウザにより）です。

ボタンの円の色や、テキスト表示を「オフ、オン」や「NO、YES」などとで変更することで汎用的に利用できます。

サンプル

サンプルのhtmlソース

<label for="toggle">
  <input class="input" type="checkbox" id="toggle"/>
  <div class="toggle-wrapper"><span class="selector"></span></div>
  <p class="notification">toggleボタンの状態： <span class="selected"></span></p>
</label>

サンプルのCSSソース

label {
  pointer-events: none;
}
label .input {
  display: none;
}
label .input:checked + .toggle-wrapper > .selector {
  left: calc(100% - 50px);
  background-color: #3957ee;
}
label .input:checked ~ .notification > .selected:before {
  content: "青色";
  color:blue;
}
label .toggle-wrapper {
  position: relative;
  width: 120px;
  height: 60px;
  background-color: #eaeaea;
  border-radius: 999px;
  margin: auto;
  cursor: pointer;
  pointer-events: all;
}
label .toggle-wrapper .selector {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 10px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #ee5f39;
  transition: left 0.25s ease;
  border-radius: 50%;
}
label .notification {
  font-size: 20px;
  width: 100%;
}
label .notification .selected:before {
  content: "赤色";
  color:red;
  font-size: 20px;
  border-bottom: 2px solid;
}