HTMLとCSSでシンプルなトグルスイッチを作ります。

デモ

解説

HTML

HTMLはシンプルにいきます。セマンティックなHTMLを心がけます。

<label><input type=checkbox>Click Me</label>

楕円部？が<input>本体、中の●が<input>の::before (pseudo-element)です。
普通のチェックボックスも使う場合は<input>はclass=toggleなどにします。

CSS

次にCSSです。

/* おまじない */
* {
  box-sizing: border-box;
}
body {
  color: #0c0c0d; /* 黒 */
  font-size: 16px;
  line-height: 1.4;
}

/* ここから本文 */

/** ここは下とまとめても問題ないですが、基本的にはページ内でinputのデザインは揃えたほういいと思います */
input {
  border: 1px solid #0c0c0d4d;
  color: #737373; /* グレー */
  display: inline-block;
  margin: 0 4px;
}
/* 楕円部 */
input[type="checkbox"] {
  -webkit-appearance: none;    /* 消してもOK */
  appearance: none;            /* 元々あるチェックボックスを非表示にする */
  background-color: #0c0c0d1a; /* 楕円の色=文字色alpha10% */
  border-radius: 8px;          /* heightの半分 */
  height: 16px; 
  width: 32px;                 /* heightの2倍くらい */
}
input[type="checkbox"]:hover {
  background-color: #0c0c0d33;
  border-color: #0c0c0d7f;
}
input[type="checkbox"]:active {
  background-color: #0c0c0d4d;
}
input[type="checkbox"]:focus {
  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px #0a84ff4d;
}
input[type="checkbox"]:checked {
  background-color: #0060df; /* 青 */
  border-color: #0060df;
}

/* 中の● */
input[type="checkbox"]::before {
  background-color: currentColor; /* ●の色=グレー */
  border-radius: 6px;             /* heightの半分 */
  content: "";                    /* おまじない */
  display: inline-block;          /* おまじない */
  height: 12px;                   /* 楕円部のheightより2px小さいくらい */
  margin-left: 1px;               /* 楕円部と●のすき間 */
  margin-top: 1px;                /* 楕円部と●のすき間 */
  transition: margin-left .2s cubic-bezier(.07, .95, 0, 1); /* ヌルっと具合は調整 */
  width: 12px;                    /* heightに合わせる */
}
input[type="checkbox"]:checked::before {
  background-color: #ffffff; /* 白（楕円部の色と調整） */
  margin-left: 17px;         /* ●を右へ移動 */
}

サイズはpx単位で合わせていますが、状況に応じてem単位にしてもいいと思います。
ただしユーザーエージェントに依りますが<input>では1emが周りより小さくなるので、別途font-sizeを指定する必要があります。（もしくはremを使う）

最後のmargin-leftは
楕円のwidth32px − 左右border2px − 始めのmargin-left1px − ●のwidth12px = 17px
にしています。box-sizingや各サイズを変更した場合は調整します。

コピペされる方は色その他装飾は適宜変更してください。（変数にして:rootで定義するなど）

おまけ

要らないとは思いますが、万が一スイッチの中にテキストを入れる場合は::afterに書きます。

<label><input type=checkbox class=text data-text-off=OFF data-text-on=ON>On/Off Text</label>

input[type="checkbox"].text {
  position: relative;
}
input[type="checkbox"].text::after {
  content: attr(data-text-off); /* カスタム属性を使わず直接"OFF"でもOK */
  font-size: 8px;               /* 調整 */
  position: absolute;
  right: 2px;
  top: 2px;
}
input[type="checkbox"].text:checked::after {
  color: #ffffff;
  content: attr(data-text-on); /* カスタム属性を使わず直接"ON"でもOK */
  left: 2px;
  right: auto;
}

まとめ

シンプルイズベスト

HTML+CSSでトグルスイッチ

デモ

解説

HTML

CSS

おまけ

まとめ