ラジオボタンをおしゃれにするCSSスニペット16選。ポチッ！で感動をお届け。
フォームのデザインをかっこよくするラジオボタンのCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。
本記事ではフォームの中でも「ラジオボタン」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
シンプルで押しやすい見た目・サイズのラジオボタンCSSデザイン例。
クリックで色が変わるシンプルなラジオボタン。選択中の項目が分かりやすい。
See the Pen CSS radio buttons by Angela Velasquez (@AngelaVelasquez) on CodePen.
オンフォーカスで明度が上がり、クリックでさらに色が変わるタイプのシンプルなラジオボタンです。
クリック時にtransitionが設定されていて、少しだけゆっくりアニメーション的にラジオボタンがONになる様子がとても上品です。
シンプルではありますが、選択中の項目が分かりやすいですし、見栄えも確実によくなりますので、非常に実用性が高いスニペットです。
中のポチがない。フラット＆シンプルなラジオボタン。
See the Pen
Better radio and checkbox replacement with jQuery by Gareth Weaver (@garethdweaver)
on CodePen.
ラジオボタンは、中ポチがON/OFFされるデザインのものが多いですが、こちらは中ポチが無く円の色が変わるだけという非常にシンプルな構成です。
フラットなデザインにしたいサイトなどに非常に合いそうです。
動きは少ないが見やすいラジオボタンデザイン。読み取り専用時のスタイルもあり。
See the Pen CSS Radio Buttons by Tristan White (@triss90) on CodePen.
灰色のラジオボタンがベースで、クリックでONにすると青色になるだけのラジオボタンですが、こちらも実用性が高そうです。
読み取り専用時のデザインも用意してありセットで使いやすいです。
シンプルな黒丸に少しの工夫を加えたラジオボタンデザイン。
See the Pen
Minimal radio styles by Monica Salter (@moca_salter)
on CodePen.
こちらはラジオボタンの●を少し大きくして、選択時にシンプルなkeyframes動作を加えたものになります。
派手さはありませんが実用性は高そうですね。
細かい動きにセンスが感じられる。アイデアが詰まったラジオボタンCSSデザイン例。
フォーカスでちょっとだけラジオボタンがONになる様子が見えるラジオボタン。
See the Pen Material Radio Input by Christian Hall (@jchristianhall) on CodePen.
シンプルな構成のラジオボタンですが、オンフォーカスで中ポチの残像がちょっとだけ見えるが良いですね。
さらにクリックするとおおきめの中ポチが付くので見やすさもGOODです。
クリックで波紋が広がるシンプルデザインのラジオボタン。
See the Pen Material Design Radio Button CSS only by Hannes Kamecke (@hansmaad) on CodePen.
クリックするとラジオボタンの周りに波紋が広がります。
このようなアニメーションをするフォームは押したときに「押した感」があって良いです。
インラインの区画を使ったラジオボタン。
See the Pen Inline Radio Buttons by lukejacksonn (@lukejacksonn) on CodePen.
インラインの区画を使ったラジオボタンです。
大きいのでクリックしやすいですし、MAX横幅が決まっていて選択肢の数に応じて各区画の幅が決まるので、レスポンシブなデザインなどでも使いやすいと思われます。
ボックスボタンデザイン風のラジオボタン。
See the Pen Accessible Inline Radio Inputs by Jerry Jones (@jeryj) on CodePen.
上述のインライン区画と同じようなスタイルですが、こちらは完全に枠がボックスで分離していてまるでボタンのようになっています。
中ポチが横移動するラジオボタン。
See the Pen
CSS only input radio select concept by web-tiki (@web-tiki)
on CodePen.
一見通常のラジオボタンに見えますが、選択すると中ポチが横移動します。
ラジオボタンに見えない！個性豊かな見た目ののCSSデザイン例。
ラジオボタンがスライムに！？クリックで中ポチがスムーズに動き出す。
See the Pen Gooey radio buttons by Mikael Ainalem (@ainalem) on CodePen.
まるで中ポチが白いスライムのように動くラジオボタンです。
流体の動きがスムーズで美しいデザインですね。
クリックでラジオボタンが移動するおしゃれなデザイン。
See the Pen
Swappy radios by Liam (@liamj)
on CodePen.
ラジオボタンの部分がクリックで移動することで、選択肢が変化します。
こちらもスムースに動くデザインで素晴らしいですね。
SVGアイコンを使ったグラフィカルなラジオボタン。
See the Pen Form with SVG radio buttons by Angela Velasquez (@AngelaVelasquez) on CodePen.
画像ではなくSVGアイコンを使って、選択する項目をイメージしやすくしているラジオボタンです。非常にグラフィカルで選択するのが楽しくなるフォームデザインです。
もう、完全にラジオボタンには見えませんが、ソースコードを見るとinput type="radio"となっていることがわかるかと思います。
SVGアイコンを使ったグラフィカルなラジオボタン②。
See the Pen Pure CSS Radio Button Tiles by Casey Callow (@caseycallow) on CodePen.
こちらもSVGアイコンを使って、選択する項目をイメージしやすくしているラジオボタンです。
上記と同様、選択項目が何かがわかりやすいですし、使っていて楽しくなるデザインですね。
ピカっと光る光源が移動するラジオボタン。
See the Pen Animated Radio Inputs by simurai (@simurai) on CodePen.
光る光源が移動するラジオボタンです。まるで2枚の紙が重なっていて、その中を光が移動しているように見えて美しいです。
背景が黒系統のサイトではかなり目立ちそうですね。
Google風？浮遊するボールのようなラジオボタン。
See the Pen Google Dots Radio Buttons by Victor Freire (@victorfreire) on CodePen.
凄い！。ちょっとグーグルっぽい感じの色合いで、上下に浮遊するラジオボタンです。クリックするとボタン毎にON動作が違いますし、かなり作りこんでありますね。
実用性は低いかもしれませんが、感動は一番なラジオボタンでした。
ONにする動作が超かっこいいラジオボタン。
See the Pen Jelly Radio Button by Tommaso Poletti (@tomma5o) on CodePen.
ラジオボタンをクリックすると、線が収束していき、最後にキラっと点滅する動作をするラジオボタンです。
オンにしました感があって、押して楽しいデザインですね。
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-textbox/
