入力フォームでラジオボタンやチェックボックス、スイッチなどはよく使うと思いますが、デザインが単調になりがちではないでしょうか？
そこで今回はコピペで簡単に使える、CSSで動くアニメーショントグルをご紹介します。
ぜひフォームなどでトグルをよく使う！という方は参考にしてみてください。
クリックで光る電球風のトグルスイッチ
See the Pen
Pure CSS Bulb Switch by Grzegorz Witczak (@Wujek_Greg)
on CodePen.
某アニメ風のキャラクターがクリックで起きたり寝たりするアニメーショントグルスイッチ
See the Pen
Totoro Toggle by Adam Kuhn (@cobra_winfrey)
on CodePen.
クリックすると跳ねる弾力のあるアニメーションスイッチボックス(トグル)
See the Pen
✅ Springy Switchbox | Checkbox toggle animation | @keyframers 2.0.0 by @keyframers (@keyframers)
on CodePen.
クリックで放射状に色が変化するアニメーションスイッチボックス(トグル)
See the Pen
#028 – Toggle Radial Effect by Florin Pop (@FlorinPop17)
on CodePen.
CSSグリッドアニメーションを使用したシンプルなスイッチボックス(トグル)
See the Pen
CSS grid toggle (animates in Firefox Nightly only) by Liam (@liamj)
on CodePen.
シンプルなスイッチボックス(トグル)3種
See the Pen
Simple Knobby Toggles by Daryn St. Pierre (@bloqhead)
on CodePen.
クリックで性別が切り替わるスイッチボックス(トグル)
See the Pen
Gender Toggle Pure CSS by Chintu Yadav Sara (@chintuyadav)
on CodePen.
電気の切り替えボタンのようなトグルスイッチ
See the Pen
Checkbox Rocker Toggle Switch by Marcus Connor (@marcusconnor)
on CodePen.
ON,OFFが分かりやすい赤と緑のカワイイデザインのトグルスイッチ
See the Pen
Switch animation by Aaron Iker (@aaroniker)
on CodePen.
クリックでロック、アンロックが出来るアニメーショントグルスイッチ
See the Pen
Lock switch animation by Aaron Iker (@aaroniker)
on CodePen.
ONの背景色を自由に変えられるトグルボタン
See the Pen
Subscribe Buttons (CSS) by Stockin (@Stockin)
on CodePen.
トグルのアニメーションだいたい網羅！ON-OFFアニメーションスイッチ15種
See the Pen
Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh)
on CodePen.
白黒アニメーショントグルボタン
See the Pen
Switchers (Checkboxes) by Zed Dash (@z-)
on CodePen.
クリック時にトグル内のボタンがくるくる回るアニメーショントグルスイッチ
See the Pen
Wobble Toggle by Adam Kuhn (@cobra_winfrey)
on CodePen.
