CSS グループにもなるボタン型のラジオボタンの作り方

ラジボタンは本来は丸形の物が多いですが、スマホUIではボタン型になることも多々あります。

そういった時に使われるグループタイプのラジオボタンのデザインとCSSを紹介します。

特徴

  • レスポンシブ対応
  • Javascript不使用
  • ボタン一つでも使用可

デモ

See the Pen
Radio Button Group
by kura (@kuranopen)
on CodePen.

HTML、CSS

See the Pen
Radio Button Group
by kura (@kuranopen)
on CodePen.

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいWEBデザイナーです。
WEBデザイン初心者向けになるべく分かりやすいように解説しています。 そのほか、WEBデザインの便利ツール紹介、開発したりしています。