本記事では、カスタマイズ可能なスイッチ式のトグルボタンデザインのコードをご紹介します。
HTMLとCSSの両方をコピペすればすぐに利用できます。
コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。
また、「トグルボタン」の部分を作成するにはinputタグを多用します。
inputタグの使い方を詳しく知りたい人は「【HTML】inputタグの使い方：type種類・属性一覧とCSS装飾・JS連携」を一読ください。
おしゃれなフリー素材デザイン集
本サイトでは、スイッチ式のトグルボタン以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。
以下は、主なデザインカテゴリーです。
ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。
シンプルなトグルボタン（スイッチ式）
ここでは、以下のスイッチ式のシンプルなトグルボタンデザイン例を記載しています。
また、アニメーションによる動きも実装している状態です。
- 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コードを記載しています。
さらに、以下の項目もトグルボタンページでは選択式でご用意しました。
- 非アクティブ時の色
- アクティブ時の色
- アニメーション：あり, なし
ご興味があれば「トグルボタン一覧ページ」を一読ください。
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;
}よくある質問（FAQ）
スイッチをON/OFFさせるためにJavaScript（jQuery）は必要ですか？
いいえ、必要ありません。
当記事のデザインはHTMLのチェックボックス（<input type="checkbox">）とCSSの:checked疑似クラスを連動させる手法で作られているため、コピペだけで動作します。
HTMLとCSSのコードはどこにコピペすればいいですか？
HTMLコードは、トグルボタンを表示させたい場所（カスタムHTMLブロックなど）に貼り付けます。
CSSコードは、WordPressテーマの「追加CSS」や子テーマのスタイルシートに貼り付けてください。
1つのページにトグルボタンを2つ（複数）設置すると、うまく動きません。
チェックボックスとラベルを連動させるid属性とfor属性の値が重複しているのが原因です。
2つ目を設置する場合は、HTML内のid="toggle"とfor="toggle"の部分をtoggle2など別の名前に書き換えてください。
最初からスイッチが「ON（アクティブ）」になった状態にしておくには？
HTMLコード内の<input type="checkbox">の部分を<input type="checkbox" checked>のようにchecked属性を追記するだけで、初期状態をONに設定できます。
ONになった時のスイッチの「背景色（緑など）」を変更することはできますか？
可能です。
CSSコード内の:checked + label（チェックが入った状態の指定）にあるbackground-colorのカラーコードをお好みの色に変更してください。
