見本とコードシンプルなトグルボタン縁のあるトグルボタン先の細いトグルボタンさいごにはじめにこんにちは、たくまです!当ブログでCSSのみで作成するハンバーガーメニューについて紹介したことがります。参考超簡単!CSSだけでハンバーガーメニューを作成する方法!ISSEN今回は、CSSのみで作成するトグルボタンについてご紹介します!どれも簡単なので、ぜひ使ってみてください。見本とコードシンプルなトグルボタンiOS等でよく見かけるシンプルなデザインのトグルボタンです。HTMLとCSSは以下になります。none;}ポイントは疑似要素のhasを用いて状態を保持している点です。こちらを記述しないとボタンが動作しないため注意してください。縁のあるトグルボタン縁をつけたトグルボタンです。こちらもよく見かけるデザインかと思います。HTMLとCSSは以下になります。none;}先の細いトグルボタンスイッチ部分の円が大きいタイプのトグルボタンです。HTMLとCSSは以下になります。none;}さいごに今回はCSSのみで作るトグルボタンについて紹介しました。チェックボックスやラジオボタンを作成するときと同様に、input要素を使用することで作成が可能です。hasを用いた状態保持がポイントになります。:HTML&CSS関連記事JavascriptでHTMLのdata属性を取得して、活用してみた。