モダンなWebサイトでよく使われるボタンデザインのパターン集です。基本的なボタンからトレンドのガラスモーフィズムまで、様々なシーンで使えるデザインテクニックを紹介します。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
基本・アウトライン・グラデーション・浮き上がり・アニメーション付き・Pill型・アイコン付き・ガラスモーフィズム・ネオモーフィズム・矢印付きCTAの10パターンをまとめています。どれも「背景・文字色・角丸・ホバー時の変化」の組み合わせで、transitionを添えることで状態変化が滑らかになります。ガラスモーフィズムは backdrop-filter: blur()、ネオモーフィズムは多重のbox-shadowが要です。
ボタンデザインはUIの中でも特に重要な要素です。アクセシビリティを考慮し、hover効果だけでなくfocus状態のスタイルも設定することを推奨します。ガラスモーフィズムやネオモーフィズムはトレンドですが、可読性とのバランスが重要です。
Webサイトで使うボタンデザインを10種類作ってください。基本・アウトライン・グラデーション・ホバーで浮き上がる・パルスアニメーション・Pill型・アイコン付き・ガラスモーフィズム・ネオモーフィズム・矢印付きCTAの構成で、各ボタンにhoverとfocus-visibleのスタイルを付けてください。