【CSS】コピペで作る！スイッチ式のトグルボタンデザイン4選

Q: スイッチをON/OFFさせるためにJavaScript（jQuery）は必要ですか？

いいえ、必要ありません。 当記事のデザインはHTMLのチェックボックス（<input type="checkbox">）とCSSの:checked疑似クラスを連動させる手法で作られているため、コピペだけで動作します。

Q: 1つのページにトグルボタンを2つ（複数）設置すると、うまく動きません。

チェックボックスとラベルを連動させるid属性とfor属性の値が重複しているのが原因です。 2つ目を設置する場合は、HTML内のid="toggle"とfor="toggle"の部分をtoggle2など別の名前に書き換えてください。

Q: 最初からスイッチが「ON（アクティブ）」になった状態にしておくには？

HTMLコード内の<input type="checkbox">の部分を<input type="checkbox" checked>のようにchecked属性を追記するだけで、初期状態をONに設定できます。

Q: ONになった時のスイッチの「背景色（緑など）」を変更することはできますか？

可能です。 CSSコード内の:checked + label（チェックが入った状態の指定）にあるbackground-colorのカラーコードをお好みの色に変更してください。

2026年2月24日2026年6月13日

シンプルなトグルボタンのデザイン例。iOS風、iOS風（縁あり）、iOS風（背景細め）の3つのスタイルが並んでいるCode Stockのウェブサイト画面。

いつまで無駄なデザインに時間を費やしますか？自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

本記事では、カスタマイズ可能なスイッチ式のトグルボタンデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

また、「トグルボタン」の部分を作成するにはinputタグを多用します。

inputタグの使い方を詳しく知りたい人は「【HTML】inputタグの使い方：type種類・属性一覧とCSS装飾・JS連携」を一読ください。

【HTML】inputタグのtype種類一覧！属性の使い方とCSS装飾

もう無駄なレイアウトに凝るのやめたら？最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

おしゃれなフリー素材デザイン集

本サイトでは、スイッチ式のトグルボタン以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

Code Stock

シンプルなトグルボタン（スイッチ式）

ここでは、以下のスイッチ式のシンプルなトグルボタンデザイン例を記載しています。

また、アニメーションによる動きも実装している状態です。

シンプルなトグルボタンデザイン

iOS風
iOS風（縁あり）
iOS風（背景細め）

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もトグルボタンページでは選択式でご用意しました。

調整項目一覧

非アクティブ時の色
アクティブ時の色
アニメーション：あり, なし

ご興味があれば「トグルボタン一覧ページ」を一読ください。

Code Stock

TOGGLE-BUTTON | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 Simple シンプルなトグルボタン iOS風▼ iOS風（縁あり）▼ iOS風（背景細め）▼ × デザイン調整…

iOS風

HTMLコード表示

<label class="toggle-button-1">
  <input type="checkbox"/>
</label>

CSSコード表示

.toggle-button-1 {
  display: flex;
  position: relative;
  margin: 0 auto 2em;
  width: 100px;
  height: 50px;
  border-radius: 50px;
  background-color: #dddddd;
  cursor: pointer;
  transition: background-color .4s;
}

.toggle-button-1:has(:checked) {
  background-color: #4bd865;
}

.toggle-button-1::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 0 5px rgb(0 0 0 / 20%);
  background-color: #fff;
  content: '';
  transition: left .4s;
}

.toggle-button-1:has(:checked)::after {
  left: 50px;
}

.toggle-button-1 input {
  display: none;
}

iOS風（縁あり）

HTMLコード表示

<label class="toggle-button-2">
  <input type="checkbox"/>
</label>

CSSコード表示

.toggle-button-2 {
  display: flex;
  position: relative;
  margin: 0 auto 2em;
  width: 100px;
  height: 50px;
  border-radius: 50px;
  border: 3px solid #dddddd;
  box-sizing: content-box;
  cursor: pointer;
  transition: border-color .4s;
}

.toggle-button-2:has(:checked) {
  border-color: #4bd865;
}

.toggle-button-2::after {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #dddddd;
  content: '';
  transition: left .4s, background-color .4s;
}

.toggle-button-2:has(:checked)::after {
  left: 50px;
  background-color: #4bd865;
}

.toggle-button-2 input {
  display: none;
}

iOS風（背景細め）

HTMLコード表示

<label class="toggle-button-3">
  <input type="checkbox"/>
</label>

CSSコード表示

.toggle-button-3 {
  display: flex;
  position: relative;
  margin: 0 auto 2em;
  align-items: center;
  width: 100px;
  height: 25px;
  margin-top: 12.5px;
  border-radius: 50px;
  background-color: #dddddd;
  cursor: pointer;
  transition: background-color .4s;
}

.toggle-button-3:has(:checked) {
  background-color: #4bd865;
}

.toggle-button-3::after {
  position: absolute;
  left: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 0 5px rgb(0 0 0 / 20%);
  background: #fff;
  content: '';
  transition: left .4s;
}

.toggle-button-3:has(:checked)::after {
  left: 50px;
}

.toggle-button-3 input {
  display: none;
}

文字付きのトグルボタン（スイッチ式）

ここでは、以下のスイッチ式の文字付きトグルボタンデザイン例を記載しています。

また、アニメーションによる動きも実装している状態です。

文字付きのトグルボタンデザイン

Yes/No

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もトグルボタンページでは選択式でご用意しました。

調整項目一覧

非アクティブ時の色
アクティブ時の色
アニメーション：あり, なし

ご興味があれば「トグルボタン一覧ページ」を一読ください。

Code Stock

Yes/No

HTMLコード表示

<label class="toggle-button-4">
  <input type="checkbox"/>
</label>

CSSコード表示

.toggle-button-4 {
  display: flex;
  position: relative;
  margin: 0 auto 2em;
  align-items: center;
  width: 100px;
  height: 50px;
  border-radius: 50px;
  box-sizing: content-box;
  background-color: #ff8d8d33;
  cursor: pointer;
  transition: background-color .4s;
}

.toggle-button-4:has(:checked) {
  background-color: #75bbff33;
}

.toggle-button-4::before {
  position: absolute;
  left: 5px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #ff8d8d;
  content: '';
  transition: left .4s, background-color .4s;
}

.toggle-button-4:has(:checked)::before {
  left: 50px;
  background-color: #75bbff;
}

.toggle-button-4::after {
  position: absolute;
  left: 26px;
  transform: translateX(-50%);
  color: #fff;
  font-weight: 600;
  font-size: .9em;
  content: 'No';
  transition: left .4s;
}

.toggle-button-4:has(:checked)::after {
  left: 71px;
  content: 'Yes';
}

.toggle-button-4 input {
  display: none;
}