チェックボックスをおしゃれにするCSSスニペット25選。アニメーションが刺さる！
フォームのデザインをかっこよくするチェックボックスのCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。特にチェックボックスはデフォルトのデザインが地味で押しにくいことも多いですので、装飾することで改善できます。
本記事ではフォームの中でも「チェックボックス」に焦点を当て、おしゃれなCSSスニペットをまとめました。
通常のチェックボックスだけでなくトグルボタンやスイッチ形式のデザインもあります。
実用性重視。シンプルなチェックボックスでユーザビリティを向上できるCSSデザイン例。
クリックしやすいシンプルなデザインのチェックボックス。
See the Pen Simple CSS Checkboxes with Font Awesome by James Barnett (@jamesbarnett) on CodePen.
トグルボタン・スイッチ形式のチェックボックス。押しやすくスマホに最適なＵＩ。
シンプルなトグルボタン・スイッチ形式のチェックボックス。
See the Pen simple checkbox switcher by Artyom (@artyom-ivanov) on CodePen.
シンプルなトグルボタン・スイッチ形式のチェックボックスです。クリック時の動きもスムーズですし、CSSソースコード量も少なく良いです。
ON/OFFが分かりやすいスイッチタイプのデザイン。
See the Pen Accessible & Skeuomorphic Checkbox/Radio jQuery plugin by Simon Goellner (@simeydotme) on CodePen.
ON/OFFがとても分かりやすいスイッチタイプのデザインです。状態がとても把握しやすいですので、オススメできます。
クリックで点滅するトグルタイプのデザイン。
See the Pen Checkbox Trickery: Simple Toggle by Will Boyd (@lonekorean) on CodePen.
クリックするとチェックと色が変わります。簡単なCSSソースコードで実現していますけど、デザイン性が高いですね。
Pure CSSのトグルボタン・スイッチ形式のチェックボックス。
See the Pen Flat Checkboxes by Juanjo Fernandez (@juanjofr) on CodePen.
Pure CSSで作られているトグルボタン・スイッチ形式のチェックボックスです。簡単なソースコードでトグルをどのように作ればいいのかがわかりやすいです。
クルっと回りながらスライドするスイッチ形式チェックボックス。
See the Pen Full CSS checkbox by Timothee Guignard (@TimGuignard) on CodePen.
非常にデザイン性が高いスイッチ形式チェックボックスです。見てて楽しいですし、ON/OFFのチェック状態もわかりやすいという優れもの。
ON/OFFのチェック状態がわかりやすいスイッチボタン。
See the Pen Checkbox personnalisation with SVG icons by Gaëtan Bonnot (@GaetanBt) on CodePen.
SVGアイコンを使ったON/OFFのチェック状態がわかりやすいスイッチボタン。
多様なトグルボタン・スイッチチェックボックスまとめ。
See the Pen Accessible toggle-style checkbox by Chris Hart (@personable) on CodePen.
様々なトグルボタン・スイッチのデザインサンプル。
これは本当にチェックボックス！？訪問者の心に刺さる独創的なデザイン。
物凄く大きい上に、チェック時に大げさなアニメーションをするチェックボックス。
See the Pen Animated CSS3 Checkbox by Jimmy Gillam (@theigmo87) on CodePen.
非常に大きくインパクトのあるチェックボックスです。クリック時もチェックマークがダイナミックにアニメーションしつつ、緑色のチェックボックスに変化します。
規約確認など目立たせたい部分のチェックボックスに良いかと思います。
クリック時にラベルを覆い囲むチェックボックス・ラジオボタン。
See the Pen Pure CSS Fancy Checkbox/Radio by Rau (@raubaca) on CodePen.
通常のチェックボックス・ラジオボタンのように見えますが、クリックするとチェックが拡大して項目ラベルを覆い囲みます。非常に面白い動きをするコントロールデザインです。
ただし、チェックONであることが少しわかりにくいかもしれませんね。
自己主張が強いチェックボックス。
See the Pen Pure CSS Animated Checkbox by Paweł Durczok (@north-of-rapture) on CodePen.
チェック時に大きくなり、チェックされていることがわかりやすいですね。また、マウスオーバーでもチェックマークが出てくるので、クリックしたくなります。自己主張が強いチェックボックスです。
自己主張が強いチェックボックス②。
See the Pen checkbox with mo.js 💵 by Mike Quinn (@mprquinn) on CodePen.
クリック時にピカっと光ってＯＮになります。操作感の楽しいチェックボックスです。
プルっとしながら動くスライムボタン。
See the Pen Fluid Checkboxes by Bjorn (@BjornRombaut) on CodePen.
プルっとしながら動くスライムのようなチェックボックスです。
チェックボックスが取り消し線に変化する。
See the Pen ☑️ CSS-only Todo List Checkbox Animation by Shaw (@shshaw) on CodePen.
クリック時にチェックボックスが取り消し線に変化します。ただし、ONになってるのに消されちゃうのはちょっと違和感…。むしろOFFのときに取り消しにした方が良いような気もしますが…。
3Dボールが動くようなトグルボタン。
See the Pen 3D toggle – click it! by Ana Tudor (@thebabydino) on CodePen.
溝の上をボールが転がっているようなデザインです。非常に面白いです。
バラバラに分解⇒再構築される派手なアニメーション。
See the Pen Reconstructed checkbox #CodePenChallenge cpc-checkboxes by Stephen Lee (@abcretrograde) on CodePen.
クリックするとバラバラに分解されて再構築されながらON/OFFされます。ド派手です！。
完全にレバースイッチ。
See the Pen Skeuomorphic Lever Checkbox by Jon Kantner (@jkantner) on CodePen.
もう完全にレバーですね。
ライトセイバーのようなチェックボックス。
See the Pen Pure CSS3 Star Wars Lightsaber Checkboxes by Nicholas Cerminara (@ncerminara) on CodePen.
クリックでライトセイバーが出てきます。遊び心満載。
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。