CSSでボタンの枠線をグラデーションにしたい——そう思ってコードを書き始めると、すぐに壁にぶつかります。border-colorにlinear-gradientを渡しても、CSSエンジンはそれを単色にしか解釈してくれません。border-image: linear-gradient()という手もありますが、border-radiusとの相性が悪く、角丸ボタンには使いにくい。代わりに使うのがbackgroundプロパティのpadding-boxとborder-boxの2段重ね。内側はpadding-boxでコンテンツエリアを塗りつぶし、外側はborder-boxでグラデーションを配置する。border: 3px solid transparentと合わさることで、「グラデーションで描かれた枠線」が完成します。
今回は5種類のグラデーションボーダーをボタンで体感できるデモを用意しました。静止したレインボー枠線から、ホバーで枠が浮かび上がるデザイン、虹色が回り続けるアニメーション、グラデーションが横に流れるタイプ、ホバーで枠線が発光するバリエーションと、段階的に表現の幅を広げていきます。すべてCSSのみで実装しており、コピーしてCodePenやWordPress/SWELLにそのまま貼り付けて使えます。
Conic Border（コニック・ボーダー）
padding-boxとborder-boxの2層重ねを使い、コニックグラデーションでレインボーの枠線を描くデモです。仕組みはシンプルで、backgroundに2つの値を指定します。1つ目はlinear-gradient(#0f172a, #0f172a) padding-box——ダーク色をコンテンツエリアに塗りつぶし。2つ目はconic-gradient(...) border-box——グラデーションをボタン全体（枠を含む）に敷く。border: 3px solid transparentで透明な枠を確保してあるため、border-boxのグラデーションが枠線の部分だけのぞく、という仕掛けです。
レインボーが360度なめらかにつながる様子は、それだけでページの目を引くアクセントになります。ホバーなし・アニメーションなしで成立するので、「動きを最小限にしたいが枠線には個性を持たせたい」コーポレートサイトやポートフォリオのCTAボタンに向いています。border-radiusとの相性も完璧で、角丸から完全な円形まで自由に設定できます。
See the Pen Conic Border by BaseKENT (@basekent) on CodePen.
調整方法
- 枠線の色:
conic-gradient(#3b82f6, #8b5cf6, #ec4899, #f97316, #3b82f6)の色を変更してください。先頭と末尾を同じ色にすると継ぎ目が自然につながります - 枠線の太さ:
border: 3px solid transparentの3pxを大きくすると太い枠線に。padding-boxの背景色に合わせる必要はありません - 内側の背景色:
linear-gradient(#0f172a, #0f172a)の色をボタンの背景色に合わせます。明るい背景なら#ffffffに変更してください
Pseudo Wrap（シュード・ラップ）
::before 擬似要素をボタンの背面に配置し、ホバー時だけグラデーション枠線を浮かび上がらせるデモです。通常時はborder: 2px solid #334155のグレー枠線のみが見えるシンプルな状態。ホバーすると::beforeのopacityが0→1にフェードインし、シアン→ブルー→バイオレットのグラデーション枠線がじわっと現れます。::beforeはボタンより2px大きい（inset: -2px）グラデーション背景で、::afterは同サイズ（inset: 0）のダーク背景。この2層がボタン本体の後ろに重なることで、グラデーションが枠線分だけのぞく構造になっています。
ホバー前はシンプルな枠線ボタン、ホバーで枠線がカラフルに変わるという変化は、過剰に主張せず「触れてみたら反応が面白かった」という発見の演出になります。テキスト周辺に置くサブCTAや、記事内の関連リンクボタンなど、控えめに使いたい場所に向いています。
See the Pen Pseudo Wrap by BaseKENT (@basekent) on CodePen.
調整方法
- グラデーションの色:
::beforeのbackground: linear-gradient(135deg, #06b6d4, #3b82f6, #8b5cf6)を変更してください。135degは斜め方向。to rightにすると左→右の横グラデーションになります - フェード速度:
transition: opacity 0.3s easeの秒数を0.15sにすると素早い切り替えに、0.6sにするとゆっくりなフェードになります - 通常時の枠線:
border: 2px solid #334155の色を調整してください。サイトの背景色に近い色を選ぶと控えめな印象になります
Spin Gradient（スピン・グラジエント）
::beforeと::afterの2枚の擬似要素に @keyframes と filter: hue-rotate(360deg) を組み合わせ、虹色の枠線を永遠に回転させるデモです。::beforeにコニックグラデーションを敷いてhue-spinアニメーションを適用、::afterはボタンと同サイズのダーク背景で中心部を覆い、枠線3px分だけグラデーションを見せます。hue-rotateは色相環を一周させるfilter値で、全体の色合いがなめらかに変化し続けます。
ページをスクロールしなくても動いているものがある——そのキャッチ力が常時アニメーション型の強みです。ゲーム系LP・音楽イベントサイト・エンタメ系CTAに一本置くだけでページのテンションが上がります。パフォーマンスが気になる場合はwill-change: filterをスタイルに追加しておくと安定します。常時アニメーションを使う場面では最初から入れておくのが安心です。
See the Pen Spin Gradient by BaseKENT (@basekent) on CodePen.
調整方法
- 回転速度:
animation: hue-spin 4s linear infiniteの秒数を2sにすると高速回転に、8sにするとゆったりとした色変化になります - グラデーションの初期色:
conic-gradient(#3b82f6, #8b5cf6, #ec4899, #f97316, #eab308, #3b82f6)の色を変えるとhue-rotateの開始色相が変わります。ブランドカラーを起点にするとイメージに合わせやすいです - 枠線の太さ:
::beforeのinset: -3pxとborder-radius: 11pxをセットで変更してください。inset: -4pxにするならborder-radiusを12pxに（元の8px + inset量で計算）
Slide Flow（スライド・フロウ）
background-sizeで枠線グラデーションを要素の2倍幅に引き伸ばし、background-positionのアニメーションで横方向にスライドさせるデモです。padding-boxとborder-boxの2層構造はConic Borderと同じですが、border-box側にbackground-size: 200% 100%を指定してグラデーションを横に2倍拡張。@keyframesでbackground-positionを0%→100%に動かすことで、グラデーションの異なる色域がフレームに流れてきます。先頭と末尾を同じ色（青）にしているためループが途切れなく続きます。
線が横に動いているというシンプルな動きが、静止デザインとの差別化として十分な情報量を持っています。サービス紹介ページの料金プランCTA、スライドショー横のボタンなど「流れ」を感じさせたい場面に。派手なアニメーションを使いにくいビジネス系サイトでも、枠線だけの動きなら受け入れてもらいやすいです。
See the Pen Slide Flow by BaseKENT (@basekent) on CodePen.
調整方法
- 流れる色:
linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #f97316, #3b82f6)を変更してください。先頭と末尾を同じ色にするとシームレスなループになります - 流れる速度:
animation: border-flow 3s linear infiniteの秒数を1.5sにすると速く、6sにするとゆっくり流れます - グラデーションの幅:
background-size: 100% 100%, 200% 100%の200%を300%にするとグラデーションがよりなだらかになります。その場合は@keyframesの終点をbackground-position: 0 0, 200% 0に合わせて変更してください
Glow Edge（グロウ・エッジ）
padding-box/border-boxの手法でシンプルな2色グラデーション枠線を引き、ホバー時にbox-shadowで枠線周囲を発光させるデモです。デフォルト時は静かなグラデーション枠線、ホバーすると紫・青のダブルグロウが枠線から外側へ広がります。transition: box-shadow 0.4s easeでグロウがなめらかにフェードインするため、「枠線が浮かび上がって光る」という視覚的な連続性が生まれます。
グラデーション枠線だけだと「きれいだな」で終わりますが、ホバー時のグロウが「触れると反応する」フィードバックとして機能します。SaaSのプランページやポートフォリオのメインCTAで多く見られるスタイルで、ネオン系とは違い枠線の色と発光色を揃えることで上品にまとめられる点が使いやすいです。
See the Pen Glow Edge by BaseKENT (@basekent) on CodePen.
調整方法
- 枠線グラデーション:
linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899)を変更してください。135degは斜め方向。to rightにすると横グラデーションになります - 発光色と強さ:
box-shadow: 0 0 16px rgba(139, 92, 246, 0.6), 0 0 32px rgba(59, 130, 246, 0.3)の透明度（最後の値）を上げると強い発光に、下げると淡い光輪になります - 発光の広がり:
16px/32pxの数値を大きくするとより広い範囲に光が広がります。8pxのようにpxを小さくするとタイトな発光になります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
