最近はチェックボックスもただ単に色や大きさを変えるだけではなく、アニメーションを付けてより分かりやすく表現をしているサイトやアプリを多く見受けられます。
ただ、アニメーションを付けるとサイトが重くなったり、ソースコードがややこしくなったりしてしまいますよね。
そこで今回は軽くて簡単！CSSで表現が出来るチェックボックス＆トグルのデザインをご紹介します。
サイト制作の際に必ず役に立つと思います。
TO DOリスト風チェックボックスCSS1
チェックすると文字に打ち消し線が引かれるアニメーション付き。
中々見ないアニメーションなので面白いです。
See the Pen
Todo Checkbox by Katherine Kato (@kathykato)
on CodePen.
TO DOリスト風チェックボックスCSS2
上記同様TODOリスト風のデザイン。
チェックすると文字に打ち消し線が引かれるとともに、文字の色も変化するので分かりやすいです。
See the Pen
Checkmark by Andreas Storm (@andreasstorm)
on CodePen.
アニメーション付きプラスマイナストグルCSS
押すと右にプラスとマイナスがスライドするアニメーション付きCSS。
ちょっとしたアクセントになりますね。使いどころが多そうです。
See the Pen
+/- Toggle by Aaron Iker (@aaroniker)
on CodePen.
水滴が落ちたようなアニメーション付きチェックボックスCSS
カワイイアニメーション付きチェックボックス。
これもあまりほかのサイトで見たことがないアニメーションデザインです。
See the Pen
Gooey Checkbox (Chrome) by Andreas Storm (@andreasstorm)
on CodePen.
シンプルなチェックボックス＆トグルCSS1
シンプルなCSSです。
色を変えるだけですぐに自身のサイトに流用出来そうです。
See the Pen
2020 Toggles by Aaron Iker (@aaroniker)
on CodePen.
シンプルなチェックボックスCSS2
シンプルなCSSデザイン。
どんなデザインにも合わせられる上に、分かりやすいです。
チェックボックスに目立たない程度のワンアクセントを入れたい方にオススメ。
See the Pen
Checkbox by Andreas Storm (@andreasstorm)
on CodePen.
シンプルなチェックボックスCSS3
オンにするとチェックボックスの色が変わるアニメーション付きチェックボックスCSS。
どのサイトにも使えます。
See the Pen
Checkbox by Mohammadreza Ziadzadeh (@themzed)
on CodePen.
シンプルなチェックボックスCSS4
オンにすると×ボタンがチェックマークに代わるシンプルなアニメーションがついたCSS。
See the Pen
Toggle Button Animation by Aaron Iker (@aaroniker)
on CodePen.
シンプルなチェックボックスCSS5
シンプルなアニメーション付きチェックボックスCSS。
サークルタイプ、スクエアタイプが選べます。
See the Pen
Fancy Checkboxes and Radio Buttons — with Font Awesome by Jase (@jasesmith)
on CodePen.
シンプルなチェックボックスCSS6
押すとボックスがひっくり返るアニメーション付きチェックボックスCSS。
See the Pen
#CodePenChallenge | Pure CSS Checkboxes by Stas Melnikov (@melnik909)
on CodePen.
シンプルなチェックボックスCSS7
マテリアルデザイン風のシンプルなチェックボックスです。
See the Pen
Material Design Checkbox by Andreas Storm (@andreasstorm)
on CodePen.
シンプルなチェックボックスCSS8
チェックすると一瞬ボックスの周りに円が広がるアニメーションが付いたシンプルなアニメーション付きチェックボックスCSSです。
See the Pen
#CodePenChallenge – Checkbox by Andreas Storm (@andreasstorm)
on CodePen.
シンプルなチェックボックスCSS9
よく色々なサイトで見るようなシンプルなアニメーションが付いたチェックマーク。
See the Pen
CSS Checkmark Animation by Danian (@daniandl)
on CodePen.
シンプルなチェックボックスCSS10
チェック前とチェック後が分かりやすいシンプルなチェックボックス。
See the Pen
Pure CSS Toggle slider/checkbox with SVG tick and cross by Ian Egner (@webdevian)
on CodePen.
シンプルなチェックボックスCSS11
押すと一瞬チェックボックスが跳ねるシンプルなチェックボックス。
See the Pen
Jelly Checkbox by Andreas Storm (@andreasstorm)
on CodePen.
シンプルなトグルCSS1
シンプルだけれどわかりやすいトグルデザインです。
See the Pen
Material Design Toggle by Andreas Storm (@andreasstorm)
on CodePen.
シンプルなトグルCSS2
押すと背景色が変わりながらぬるっとスライドするシンプルなトグルデザイン。
See the Pen
All-CSS Toggle Switch (Checkbox Hack) by Marcus Burnette (@mburnette)
on CodePen.
オンオフの凹凸が分かりやすい！フラットなチェックボックスCSS1(ニューロモーフィックデザイン)
最新家電についているボタンのようなフラットデザイン。
オンオフが面白いのでついつい押したくなりますね。
See the Pen
Neuomorphic Checkboxes by Braydon Coyer (@braydoncoyer)
on CodePen.
オンオフの凹凸が分かりやすい！フラットなチェックボックスCSS2(ニューロモーフィックデザイン)
種類が上記1のCSSよりも少し多いので合わせて使うと色々なバリエーションがあって面白そう。
See the Pen
Neumorphic Design by Chris Weissenberger (@CAWeissen)
on CodePen.
線をなぞる＆背景色が変わるアニメーション付きチェックボックスCSS
シンプルながらもわかりやすく面白いアニメーション付きチェックボックスCSSです。
これも使いたいデザインですね。
See the Pen
Checkboxes by Aaron Iker (@aaroniker)
on CodePen.
チェックするとチェックマーク＆色が変わるチェックボックスCSS
よく見るシンプルなアニメーション付きチェックボックス。
使いどころは多そうです。よくログイン画面などで見ますよね。
See the Pen
A checkbox animation by Himalaya Singh (@himalayasingh)
on CodePen.
背景を活用した面白いチェックボックスCSS
他に見ないアニメーション付きチェックボックスCSS。
使い勝手は良くなさそうですが、他と違うデザインにしたい場合に活躍しそうです。
See the Pen
Fancy checkbox by Ana Tudor (@thebabydino)
on CodePen.
チェックでカギがかかるアニメーション付きチェックボックスCSS
パスワードの決定画面などで使えそうですね。
アニメーションを逆にすればログイン画面などでも使えそうです。
See the Pen
Lock by Andreas Storm (@andreasstorm)
on CodePen.
フリップアニメーション付きチェックボックスCSS
押すとフリップがひっくり返るようなアニメーションがついたチェックボックスCSSです。
シンプルなのでこちらも使いどころが多そうです。
See the Pen
Flip checkbox by Andreas Storm (@andreasstorm)
on CodePen.
弾けるようなアニメーション付きチェックボックスCSS
押すとボックスが弾けるようなアニメーションが付いたチェックボックスCSSです。
かなりインパクトはありそう。
See the Pen
100dayscss-66 by @mandycodestoo (@mandycodestoo)
on CodePen.
ボタン風チェックボックスCSS
ボタンのようなチェックボックス。
押すとプラスのアイコンがチェックマークに代わるアニメーション付き。
See the Pen
chippy checkbox inputs by Adam Quinlan (@quinlo)
on CodePen.
絵文字を使ったチェックボックスCSS
押すと絵文字アイコンが切り替わる面白いチェックボックスです。
日本ではあまり見ないタイプですね。
See the Pen
✅ Emojibox – Checkbox with emojis by Jouan Marcel (@jouanmarcel)
on CodePen.
絵文字を使ったチェックボックスCSS2
チェックすると絵文字のグーが、グッドになるチェックボックス。
絵文字だと直感的にわかりやすいですね。
See the Pen
Pure CSS Emoji Checkbox by Brett Commandeur (@bcmdr)
on CodePen.
スケートボード風チェックボックスCSS
スケートボードをモチーフにした面白いチェックボックスCSS。
押すと片側の車輪が持ち上がるようなトリック風のアニメーションになっています。
See the Pen
Pure CSS Skateboard Checkbox by Adam Kuhn (@cobra_winfrey)
on CodePen.
グラデーショントグルCSS
押すとトグルが一瞬丸に変化し、逆側にチェックが移動するアニメーションが付いたCSS。
色とサイズを変えて使えば、ちょっとしたトグルも目立つトグルに大変身。
See the Pen
Dumb Toggles by Adam Kuhn (@cobra_winfrey)
on CodePen.
顔アイコンが変化するアニメーション付きトグル
押すとトグル内の顔アイコンが笑顔に変化するアニメーション付きトグルCSS。
使いどころは難しそうです・・・笑
See the Pen
Toggle by Daryl / Dave by David Darnes (@daviddarnes)
on CodePen.
顔アイコンが変化するアニメーション付きトグル2
上記の背景がグラデーションバージョンです。
やはり色が付くとより目立ちますね！
See the Pen
Toggle by Katherine Kato (@kathykato)
on CodePen.
SVG画像を使用したアニメーション付きチェックボックスCSS
See the Pen
Cool Checkbox with SVG! by Luis Adame (@lewis_adame)
on CodePen.
立体感のあるアニメーショントグルスイッチCSS
質感がとてもリアルで、動きもスムーズ。
使用サイトは選びそうですが、実際に使えたらかなりカッコいいですね。
See the Pen
Soft Toggle Switch by Ana Tudor (@thebabydino)
on CodePen.
背景などの色が変化するシンプルでかっこいいチェックボックスCSS
これはかなり使えそうなアニメーション付きチェックボックスです。
シンプルだけれど洗練されていて使い勝手がかなりよさそう。
See the Pen
Material Inspired Checkboxes and Radio Groups by Buddy Reno (@BuddyLReno)
on CodePen.
シンプルでかわいいフラットチェックボックスCSS
とてもシンプルだけれど、フラットでかわいいです。
こちらも使い勝手が良さそうです。
See the Pen
Check Boxes by Leonard Meagher (@LeonardMeagher2)
on CodePen.
4種のフラットカスタムチェックボックスCSS
4種類のフラットなチェックボックスです。
どれもオシャレで色々なサイトと相性が良さそう。
See the Pen
Custom Checkbox / Toggle Switch by thelaazyguy (@thelaazyguy)
on CodePen.
6種のエフェクト付きシンプルチェックボックス
シンプルだけれどエフェクトがオシャレなチェックボックス。
チェックした際に分かりやすく目を引きますよね。
See the Pen
Pure CSS3 Checkboxes with FontAwesome by foxeisen (@foxeisen)
on CodePen.
左からボックスの中身がスライドするチェックボックスCSS
押すと左からスライドするアニメーションが面白いシンプルなチェックボックス。
See the Pen
Radio and Checkbox Styles by Matthew Shields (@MatthewShields)
on CodePen.
21種のアニメーション付きチェックボックスCSS
面白くてシンプルなアニメーションが付いたチェックボックス21種です。
設問などに合わせて使い分けると飽きずにアンケートなどが出来そう。
See the Pen
Style Checkboxes – using CSS custom properties by Katheer Mizal (@katheer)
on CodePen.
3Dな動きをするアニメーショントグルCSS
押すと奥行きがありそうな3D風のアニメーションが付いたトグル。
See the Pen
[CSS] 3D Switcher Vll Plus by Rplus (@Rplus)
on CodePen.
SVGアニメーションチェックボックスCSS
SVGを使ったアニメーションがついたチェックボックスCSS。
海外ではSVGを使うのが流行っているのでしょうか。よく見る気がします。
See the Pen
Checkbox SVG Path Animation by Andreas Storm (@andreasstorm)
on CodePen.
プラスチックのようなリアルな質感のチェックボックス
写真のようにも見えるリアルな質感のチェックボックス。
See the Pen
Realistic CSS Switch (checkbox) by Nathan Taylor (@nathantaylor)
on CodePen.
サークルがスライドするアニメーションチェックボックスCSS
押すと×ボタンが入ったサークルが右側にスライドして〇ボタンに代わるアニメーションが付いたチェックボックス。
面白く体感的にもわかりやすいです。
See the Pen
Full CSS checkbox by Timothee Guignard (@TimGuignard)
on CodePen.
ロールオーバー、クリックと2段階の変化をするチェックボックス
通常時、ロールオーバー時、クリック時の3パターンあるアニメーションが付いたチェックボックス。
シンプルでわかりやすく、使いやすいです。
See the Pen
Pure CSS Animated Checkbox by Paweł Durczok (@north-of-rapture)
on CodePen.
