【CSS】CSSのみでトグルボタンを作成
寺田拓真約3分で読めます
はじめに
こんにちは、たくまです！
当ブログでCSSのみで作成するハンバーガーメニューについて紹介したことがります。
【CSSのみ】レスポンシブなハンバーガーメニューの作成方法
ハンバーガーメニュー(ドロワーメニュー)を簡単に実装したい方に向けて実装方法を書きました。この記事ではCSSのみでハンバーガーメニューを作成する方法をわかりやすく解説してします。ぜひ使ってみてください！
今回は、CSSのみで作成するトグルボタンについてご紹介します！
どれも簡単なので、ぜひ使ってみてください。
対象読者
- CSS初学者の方
- js等は使用せずにCSSのみでトグルボタンを作成したい方
見本とコード
シンプルなトグルボタン
iOS等でよく見かけるシンプルなデザインのトグルボタンです。
HTMLとCSSは以下になります。
<label class="toggle-button">
<input type="checkbox" />
</label>.toggle-button {
margin: 300px;
display: inline-block;
position: relative;
width: 100px;
height: 50px;
border-radius: 50px;
background-color: #dddddd;
cursor: pointer;
transition: background-color 0.4s;
}
.toggle-button:has(:checked) {
background-color: #4bd865;
}
.toggle-button::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 0.4s;
}
.toggle-button:has(:checked)::after {
left: 50px;
}
.toggle-button input {
display: none;
}ポイントは疑似要素のhasを用いて状態を保持している点です。
こちらを記述しないとボタンが動作しないため注意してください。
縁のあるトグルボタン
縁をつけたトグルボタンです。
こちらもよく見かけるデザインかと思います。
HTMLとCSSは以下になります。
<label class="toggle-button">
<input type="checkbox" />
</label>.toggle-button {
margin: 400px;
display: inline-block;
position: relative;
width: 100px;
height: 50px;
border-radius: 50px;
border: 3px solid #dddddd;
box-sizing: content-box;
cursor: pointer;
transition: border-color 0.4s;
}
.toggle-button:has(:checked) {
border-color: #4bd865;
}
.toggle-button::after {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
width: 45px;
height: 45px;
border-radius: 50%;
background-color: #dddddd;
content: "";
transition: left 0.4s;
}
.toggle-button:has(:checked)::after {
left: 50px;
background-color: #4bd865;
}
.toggle-button input {
display: none;
}先の細いトグルボタン
スイッチ部分の円が大きいタイプのトグルボタンです。
HTMLとCSSは以下になります。
<label class="toggle-button">
<input type="checkbox" />
</label>.toggle-button {
margin: 300px;
display: flex;
align-items: center;
position: relative;
width: 100px;
height: 25px;
margin-top: 12.5px;
border-radius: 50px;
background-color: #dddddd;
cursor: pointer;
transition: background-color 0.4s;
}
.toggle-button:has(:checked) {
background-color: #4bd865;
}
.toggle-button::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 0.4s;
}
.toggle-button:has(:checked)::after {
left: 50px;
}
.toggle-button input {
display: none;
}さいごに
今回はCSSのみで作るトグルボタンについて紹介しました。
チェックボックスやラジオボタンを作成するときと同様に、input要素を使用することで作成が可能です。
また、hasを用いた状態保持がポイントになります。
どれもコピペしたらすぐに使うことができるので、ぜひお試しください！
この記事を書いた人
