ベタ塗りのボタンに少し飽きてきたら、グラデーションの出番です。複数の色がなめらかに溶け合うことで、ボタンひとつに奥行きや世界観が生まれます。ホバーで色が流れるアニメーションを加えれば、ユーザーの指先を「触れてみたい」と引き寄せる仕掛けにもなります。
この記事では、CSSだけで実装できるグラデーションボタンを5つ紹介します。コピペですぐに使えて、WordPress（SWELL含む）でもそのまま動作します。色や速度の調整方法もあわせて載せているので、自分のサイトのトーンに合わせてカスタマイズしてみてください。
Flowing Spectrum（フローイング・スペクトラム）
虹のような多色グラデーションが、ボタンの上をゆっくりと流れ続けるデザインです。ページを開いた瞬間から動いているので、ファーストビューのCTAボタンやキャンペーンバナーのリンクなど、確実に目を引きたい場所に最適。
background-sizeを300%に広げたうえで@keyframesで端から端まで往復させることで、色が途切れなく移り変わるループアニメーションを実現しています。ホバー時にはふわっと浮き上がるtranslateYも加えて、インタラクション感をプラスしました。
See the Pen Flowing Spectrum by BaseKENT (@basekent) on CodePen.
調整方法
- 配色:
linear-gradient(270deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ff6b6b)のカラーコードを変更してください。最初と最後を同じ色にするとループが自然につながります - アニメーション速度:
animation: flowing 4sの4sを大きくするとゆっくり、小さくすると速くなります - 角丸:
border-radius: 8pxを50pxにするとピル型ボタンになります
なお、コードにはprefers-reduced-motion: reduceでアニメーションを無効化する記述も含めています。動きを減らしたい設定のユーザーにも配慮できるので、そのまま残しておくのがおすすめです。
Chromatic Shift（クロマティック・シフト）
ホバーするとグラデーションがするりとスライドして、色味がガラッと切り替わるデザインです。通常時は落ち着いたパープル、ホバーで鮮やかなピンクへ。この「変身感」がクリックへの期待を高めてくれます。
仕組みはシンプルで、background-size: 300%で画面外まで広がるグラデーションを仕込んでおき、ホバー時にbackground-positionをずらすだけ。たった数行のCSSで、印象的なカラーチェンジが実現できます。ポートフォリオの「View More」ボタンやサービスサイトのCTAにどうぞ。
See the Pen Chromatic Shift by BaseKENT (@basekent) on CodePen.
調整方法
- 配色:
linear-gradient(135deg, #667eea, #764ba2, #f093fb, #f5576c)の4色を変更してください。隣り合う色のコントラストが強いほどドラマチックな印象になります - 変化の速度:
transition: background-position 0.6sの秒数で、色が切り替わるスピードを調整できます - グラデーションの角度:
135degを90deg（水平方向）や180deg（垂直方向）に変えると、色の流れる方向が変わります
Shimmer Glide（シマー・グライド）
ホバーすると、ボタンの表面を光の帯がスーッと横切るエフェクト。宝石やメタルの表面に光が走るような上品な動きで、ECサイトの「カートに入れる」ボタンやポートフォリオのリンクなど、高級感を出したい場面にぴったりです。
::after疑似要素に半透明の白グラデーションを仕込み、ホバー時にleft: -100%からleft: 100%へスライドさせています。overflow: hiddenでボタンの外にはみ出た部分を隠すのがポイント。ベースのグラデーション自体は静止しているので、光だけが走る洗練された印象になります。
See the Pen Shimmer Glide by BaseKENT (@basekent) on CodePen.
調整方法
- 光の強さ:
rgba(255, 255, 255, 0.35)の0.35を大きくすると光が強く、小さくすると控えめになります - スライド速度:
transition: left 0.6sの秒数で光の通過速度を調整できます - ベース色:
linear-gradient(135deg, #6366f1, #8b5cf6)を好みの2色に変更してください
Aurora Border（オーロラ・ボーダー）
背景は透明のまま、枠線だけにグラデーションをまとわせたゴーストボタンです。ダーク背景の上に配置すると、まるでオーロラの光が輪郭を描いているような幻想的な仕上がりに。ホバーで周囲にグロウ（発光）がにじみ出る演出も加えています。
CSSのbackground-clip: padding-box, border-boxを使って、内側の背景と枠線の背景を別々に制御するテクニックがコア。2枚のグラデーション背景を重ねることで、透過背景＋グラデーション枠線という通常では難しい表現を実現しています。ダークモードのサイトやクリエイティブ系のポートフォリオに映えるデザインです。
See the Pen Aurora Border by BaseKENT (@basekent) on CodePen.
調整方法
- 枠線の色:
linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3)のカラーコードを変更してください - 枠線の太さ:
border: 2px solid transparentの2pxを3pxや4pxにすると枠が太くなります - ホバー時のグロウ:
box-shadowのrgbaの色味とpxの数値で、発光の色と広がり具合を調整できます
Sunset Pulse（サンセット・パルス）
夕焼けを思わせるオレンジ〜ピンクのグラデーションが、呼吸するようにじんわりと光を放つボタンです。常時アニメーションで静かに脈打つグロウが、ダーク背景の中で存在感を主張しつつも押しつけがましくない。LP（ランディングページ）のメインCTAや、ダークテーマのサイトに最適です。
@keyframesでbox-shadowの広がりと色味を2.5秒周期で変化させています。背景のグラデーション自体は静止していて、影だけがゆらめく構造。動きすぎないからこそ、品のある仕上がりになります。
See the Pen Sunset Pulse by BaseKENT (@basekent) on CodePen.
調整方法
- グラデーション色:
linear-gradient(135deg, #f5576c, #ff9a44)を変更してください。box-shadowのrgbaカラーもベースに合わせると統一感が出ます - 脈打つ速度:
animation: pulse 2.5sの秒数で呼吸のリズムを変えられます。4sにするとより穏やかに - 光の広がり:
box-shadowのpx値（15px,30px,50px）を大きくすると光が遠くまで届きます
Flowing Spectrumと同様に、prefers-reduced-motion: reduceでアニメーションを止める記述も入っています。常時アニメーションのボタンには入れておくと安心です。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
