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

2026年2月24日

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

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

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

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

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

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

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

見出し
ボタン
ボックス
ローディング
リスト
吹き出し
アコーディオンメニュー
検索フォーム
セレクトボックス
パンくずリスト
テキストボックス
ツールチップ
Q&Aリスト
引用ボックス
レーダーチャート
「READ MORE」ボタン
タブボタン
トグルボタン
チェックボックス
フッター
付箋
ページネーション
円グラフ
ラジオボタン
目次
棒グラフ
モーダルウィンドウ
タイムライン（ステップバー）

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

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

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

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

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

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

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

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

調整項目一覧

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

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

Code Stock

TOGGLE-BUTTON | Code Stock Simple シンプルなトグルボタン iOS風▼ iOS風（縁あり）▼ iOS風（背景細め）▼ × デザイン調整 HTMLコピペ CSSコピペ完了非アクティブ時の色アクティブ時の色アニメーシ…

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;
}