SnippetUI
← Back to snippets

グラデーションボーダーボタン

CSSの`-webkit-mask-composite`とアニメーショングラデーションを組み合わせ、回転する美しいグラデーションボーダーを持つボタンコンポーネントです。

HTMLCSS

プレビュー

背景が透明のままボーダーのみがグラデーションで光るボタン。JavaScript不要のピュアCSS実装です。

ユースケースと特徴

  • クリーンなデザイン: 背景は完全透明。ボーダーのグラデーションだけが目立ち、コンテンツと干渉しないシンプルな見た目。

  • アイコン・ツールバー・輝きボタンに最適: シアターマップなど、ダーク背景に置かれるコントロール系ボタンに適しています。

  • JavaScript不要: animation と mask-composite のみで実現。パフォーマンス影響が最小限。

  • バリエーション拡張容易: linear-gradient のカラーを変更するだけで、異なるテーマのボタンを簡単に作成できます。

デザインとUXのポイント

  1. mask-composite: exclude の仕組み: ::before 擬似要素に padding: 2px を設定し、その領域で content-box と逆マスクすることでボーダーだけを表示できる。

  2. アニメーションで視線誘導: 回転するグラデーションがボーダー上を流れることで、重要ボタンに対して自然に目線が集まる。

  3. ホバー時のスケールアップ: transform: scale(1.05) の微妙な大きさ変化で、クリックすることへの期待感を表現。

カスタマイズ方法

linear-gradient のカラーを変更するだけでバリエーションを作成できます:


/* サンセット */

.gb-btn::before {

  background: linear-gradient(45deg, #f97316, #ef4444, #f59e0b);

}



/* オーシアン */

.gb-btn::before {

  background: linear-gradient(45deg, #06b6d4, #3b82f6, #8b5cf6);

}

ボーダーの幅を変えるには padding の値を変更します:


/* 幅を広く (3px) */

.gb-btn::before { padding: 3px; }

.gb-btn::after { inset: 3px; }

実装コード

<button class="gb-btn">Primary</button>

<button class="gb-btn gb-btn-success">Success</button>

<button class="gb-btn gb-btn-warning">Warning</button>



<style>
.gb-btn {

position: relative;

background: transparent;

border: none;

padding: 14px 36px;

font-size: 1rem;

font-weight: 600;

letter-spacing: 0.08em;

cursor: pointer;

border-radius: 8px;

color: white;

z-index: 1;

transition: transform 0.2s ease, box-shadow 0.3s ease;

}

.gb-btn::before {

content: '';

position: absolute;

inset: 0;

padding: 2px;

border-radius: 8px;

background: linear-gradient(45deg, #f093fb, #f5576c, #4facfe, #00f2fe);

background-size: 400% 400%;

-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

-webkit-mask-composite: xor;

mask-composite: exclude;

animation: gb-rotate 3s ease infinite;

}

.gb-btn::after {

content: '';

position: absolute;

inset: 2px;

border-radius: 6px;

background: rgba(17,24,39,0.9);

z-index: -1;

}

.gb-btn:hover { transform: scale(1.05); }

.gb-btn-success::before { background: linear-gradient(45deg, #43e97b, #38f9d7); }

.gb-btn-warning::before { background: linear-gradient(45deg, #f7971e, #ffd200); }

@keyframes gb-rotate {

0%, 100% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

}
</style>

ブラウザ対応状況

| ブラウザ | 対応状況 |

|--------|--------|

| Chrome 80+ | ✅ 完全対応 |

| Firefox 99+ | ✅ 完全対応 |

| Safari 15.4+ | ✅ 対応 |

| Edge 80+ | ✅ 完全対応 |

注意: 古いSafariでは -webkit-mask-composite: xor が必要です。フォールバックとして、許容できる場面では border: 2px solid で代替可能です。