ピル型グラデーションボタン
ピル型グラデーションボタンは、左右が完全な半円の細長い「ピル(錠剤)」形に、横方向のグラデーションを乗せた現代的な CTA です。形は border-radius:999px で両端を丸め、色は linear-gradient(90deg,#f093fb,#f5576c) で左から右へ二色をなめらかに変化させていま…
解説
ピル型グラデーションボタンは、左右が完全な半円の細長い「ピル(錠剤)」形に、横方向のグラデーションを乗せた現代的な CTA です。形は border-radius:999px で両端を丸め、色は linear-gradient(90deg,#f093fb,#f5576c) で左から右へ二色をなめらかに変化させています。グラデと同系色の box-shadow をうっすら敷くことで、色が下ににじむような軽やかさを出しています。ホバー時は transform:translateY(-2px) で少し浮き、影が広がって反応が伝わります。CSS のみで JavaScript は不要です。
使う場面
- SaaS のサインアップ・無料トライアル申込
- サブスクリプションの申込やアップグレード導線
- 軽快でモダンな印象を出したい主要 CTA
グラデの色は linear-gradient の二色、影は同系の rgba を合わせると統一感が出ます。横幅を太くするなら左右 padding を増やし、太字感は font-weight と letter-spacing で整えます。ピル形は文字が短いほど映えるので、ラベルは「Start Free Trial」のように簡潔にまとめると見栄えします。グラデーション上でも文字色のコントラストは確保しておきましょう。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
グラデーションの色を変えたいです。
background の linear-gradient(90deg, 色1, 色2) の二色を差し替えると変えられます。あわせて box-shadow の rgba をその色と同系にそろえると、にじむ影まで統一感が出ます。
ピル形にするにはどうすればよいですか？
border-radius を 999px のように十分大きい値にすると、左右の端が完全な半円になりピル(錠剤)形になります。横幅は左右の padding の値で調整してください。