グラデーション枠線ボタン
中身は透明・枠線だけグラデーションするおしゃれボタン。background-clip: padding-box 等のテクニックで実現。
解説
枠線の部分だけにカラフルなグラデーションが回り続けるボタンです。仕組みは ::before 疑似要素にボタンより少し大きい四角を置き、そこへ conic-gradient（円錐状のグラデーション）を敷いて @keyframes で360度回転させているだけです。本体の背景は背面色と同じ濃紺なので、外周のグラデだけが光って見えます。JavaScript は不要で、CSS のみで成立します。
向いている場面
- SaaS や開発者向けサービスの「Get Started」など主役のCTA
- ダークテーマの料金ページで一番押してほしいプラン
- テック系LPのヒーローで視線を集めたいボタン
色味は conic-gradient の色リストを差し替えるだけで自由に変えられ、自社のブランドカラーに寄せられます。回転速度は animation の秒数で調整でき、長くするほど落ち着いた印象になります。注意点として、常時アニメーションは視覚的に強いため、ページ内で多用せず主役ボタン1つに絞るのが効果的です。動きを好まないユーザー向けに prefers-reduced-motion で回転を止める分岐を入れておくと安心です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
枠線の色を自社カラーに変えられますか
変えられます。CSSのconic-gradientに並んでいる色コードを好きな色に置き換えるだけです。2色だけにすればシンプルに、たくさん並べれば虹色のように華やかになります。
背景が濃紺以外のページでも使えますか
使えます。ただしボタン本体の背景色と、ボタンを置くページの背景色を同じにすると枠線だけがきれいに浮きます。明るい背景で使う場合は両方を白などに合わせてください。