【CodePen】トグルボタン(スイッチ)のアイデア15選

💡 実装のポイント
Pug+SCSSで書かれた8パターン構成。.normal・.transparent・.checkcross・.pancake-stack・.dog-rollover・.basketball-hoop・.beer-pongなど、パターンごとに専用クラスが割り当てられているので必要な1つだけ抜き出して使える。透明なinputをlabelに重ねて:checkedで見た目を切り替える仕組みで、バスケやビールポンなど演出が凝ったパターンは対応する@keyframesも一緒にコピーする必要あり。

💡 実装のポイント
共通クラス.tgl（非表示チェックボックス）＋隣接する.tgl-btnラベルの構成に、.tgl-light・.tgl-ios・.tgl-skewed・.tgl-flat・.tgl-flipの5テーマクラスを組み合わせる仕組み。Skewed・Flipパターンはdata-tg-off／data-tg-on属性の値をcontent: attr()で表示しているので、テキストを変える場合はHTML側の属性を書き換える。JSは一切不要。

💡 実装のポイント
#button-1〜#button-18のID指定で18パターンが完全独立。作者コメントに「どのボタンのCSSも単体でコピーしやすいよう、あえて冗長に書いている」とある通り、各IDごとに::before／::afterのスタイルを丸ごと再定義しているだけなので、使いたい番号のブロックだけ抜き出せば単体で動作する。JSなしの純CSS実装。

💡 実装のポイント
SVGフィルターのfeGaussianBlur＋feColorMatrixを組み合わせた「goo」効果で、2つの円がくっついたり離れたりする液体風の動きを表現。色は.toggle-containerの:nth-child()ごとに--active-colorカスタムプロパティで管理されているので、パターンごとの色替えはCSS変数を変えるだけでOK。JSは使わずチェックボックスの:checkedのみで制御。

💡 実装のポイント
2つのradioボタンと#flapのめくれ板をperspective＋transform-style: preserve-3d＋rotateYで3D的に反転させる仕組み。JSは#flapのテキストを選択したラベルの内容に書き換える処理と、反転後に少し揺り戻すバウンド演出のみを担当。色は--accent変数1つで管理。

💡 実装のポイント
JS不使用が特徴で、body:has(.switch__input:checked)という:has()擬似クラスだけでページ全体をダークモードに切り替えている。太陽・月のアイコンはSVGで、位置や透明度の変化はCSSトランジションのみ。作者コメントにもある通り:has()はFirefoxでの対応状況に注意が必要。

💡 実装のポイント
大量のSVGイラストで構成された非常に凝った実装。ボタンクリック時にJSが[aria-pressed]属性を切り替え、それに連動する--darkというCSSカスタムプロパティ（0か1）を軸に、雲や星、パイロットのクマなどあらゆる要素の位置・拡大率がcalc()で一括計算されている。実務に丸ごと転用するより、CSS変数1つで全体をアニメーションさせる考え方の参考にするのがおすすめ。

💡 実装のポイント
GSAPのタイムラインでclipPathの円（#circle）を一気に拡大させて画面を昼→夜に切り替え、拡大しきったタイミングで<use>要素のhrefを#day/#nightに瞬時に差し替えることで違和感なく背景を入れ替えるトリックを使用。星の瞬きや雲の流れも別途gsap.to()でランダム・無限ループさせている。JS依存度が高く、GSAP本体の読み込みが前提。

💡 実装のポイント
GSAPのMorphSVGPluginを使い、紐（#rope）をマウスダウンで伸ばし、マウスアップでバウンドしながら元に戻すモーフィングを実装。isChecked変数のON/OFFに応じてノブの位置・電球の色・光の広がり（.lightの幅高さ）をgsap.to()で変化させている。GSAP本体と有償プラグインのMorphSVGPluginが必須。

💡 実装のポイント
GSAPのDraggableで紐を実際にドラッグでき、50px以上引っ張るとあらかじめ用意された複数の紐カーブ（SVGパス）をMorphSVGPluginで順番にモーフィングさせてスイッチが入る演出。Stylus記法の--onカスタムプロパティ（0/1）が電球の色・輝きをすべて計算しており、GSAP本体＋Draggable＋MorphSVGPluginの3点セットが必須という上級者向け構成。

💡 実装のポイント
SVGのfeGaussianBlurフィルターで枠線を光らせるネオン管風の演出。枠線・ノブそれぞれにstroke-dasharrayを仕込み、ON時にだけ描画されるよう値を切り替えている。色は--on-hue1・--on-hue2のグラデーション用カスタムプロパティ2つで管理。JSなしの純CSS＋SVG実装。

💡 実装のポイント
左右の.indicator.left／.indicator.rightがオレンジ・グレーの半円を表し、base64エンコードしたSVGノイズ画像を重ねて質感を出しているのが特徴。ノブ本体（.button）はleft: 40%への移動だけで切り替わるシンプルな仕組みで、色は--accent-hue変数のみで管理。JSは使用していない。

💡 実装のポイント
.switch:has(:checked)という:has()擬似クラスでフライパン全体を傾けるrotateYアニメーションを発火させ、卵黄がtranslateX＋rotateで滑るように移動する仕組み。data-pristine属性と小さなJSクラスで、ページ読み込み時に無駄なアニメーションが再生されないよう制御している。こちらも:has()を使うためFirefoxでの対応状況に要注意。

💡 実装のポイント
.track-top／.track-botという上下2列の<span>を、それぞれ異なるtransform-originで逆方向に回転させることで歯車が噛み合っているように見せる仕組み。ON/OFFの光る色は--lgカスタムプロパティを@keyframes経由で書き換えて表現しており、JSは一切使用していない。

💡 実装のポイント
SCSSの$color・$rotation・$pivot-distanceなどの変数と、darken()・lighten()・adjust-hue()といったSassのカラー関数を多用したリアルな質感が特徴。perspective＋transform-style: preserve-3d＋rotateXでボタンを傾け、.light・.dots・.characters・.shine・.shadowの5層を重ねて立体感を演出。Sass関数を使っているため「View Compiled CSS」で書き出したものを使う必要がある。