パーツ番号 04-05-08 ・ CSSのみ

グラデーションボタンセット

異なる配色のグラデーションボタンを3種並べた見本。キャンペーンLPなど華やかさを出したいボタンに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-05-08-wrap">
          <button class="d04-05-08-btn d04-05-08-a">パープル系</button>
          <button class="d04-05-08-btn d04-05-08-b">サンセット系</button>
          <button class="d04-05-08-btn d04-05-08-c">オーシャン系</button>
        </div>

CSS

.d04-05-08-wrap{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
        .d04-05-08-btn{ font-size:13px; font-weight:600; padding:11px 20px; border-radius:8px; border:none; color:#fff; font-family:inherit; cursor:default; }
        .d04-05-08-a{ background:linear-gradient(90deg,#7c3aed,#c026d3); }
        .d04-05-08-b{ background:linear-gradient(90deg,#f97316,#ef4444); }
        .d04-05-08-c{ background:linear-gradient(90deg,#0ea5e9,#2563eb); }

クラス名 .d04-05-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。