No.062
BUTTON CSSTAILWIND

Tailwind Gradient Button

グラデーション背景＋ホバーで拡大・発光するCTAボタン。Tailwindのbg-gradient-to-r / hover:scale / shadowで定番のSaaS LPボタン。

DEMO

CODE

HTML
<div class="demo-stage tgb-stage"><button class="tgb-btn" type="button">Get Started →</button></div>
CSS
.tgb-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.tgb-btn { border:none; cursor:pointer; padding:.85rem 1.9rem; border-radius:.6rem; font-family:'Oswald',sans-serif; font-size:1rem; letter-spacing:.05em; color:#fff; background:linear-gradient(90deg,#ec4899,#a855f7); box-shadow:0 10px 25px -5px rgba(168,85,247,.5); transition:transform .25s ease, box-shadow .25s ease; }
.tgb-btn:hover { transform:scale(1.06); box-shadow:0 14px 32px -4px rgba(236,72,153,.55); }
TAILWIND (HTML)

上のライブデモはTailwind不要のCSS等価版です。下のユーティリティクラスをTailwind環境に貼ると同じ見た目になります。

<button class="px-7 py-3 rounded-lg font-semibold tracking-wide text-white
  bg-gradient-to-r from-pink-500 to-purple-500
  shadow-lg shadow-purple-500/50 transition duration-200
  hover:scale-105 hover:shadow-pink-500/60">
  Get Started →
</button>

AI PROMPT

Claude Cursor v0
PROMPT
グラデーション背景でホバー時に拡大＋発光するCTAボタンをTailwindで作って。bg-gradient-to-r from-pink-500 to-purple-500 で左→右グラデ、px-7 py-3 rounded-lg font-semibold text-white でサイズと文字、shadow-lg shadow-purple-500/50 で影、transition duration-200 hover:scale-105 hover:shadow-pink-500/60 でホバー時に1.05倍＋ピンクの発光。SaaS LPの主役ボタンに。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 マイクロインタラクション ―UI/UXデザインの神が宿る細部 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

Tailwindグラデーションボタン（Tailwind Gradient Button）とは

グラデーション背景＋ホバーで拡大・発光するCTAボタン。Tailwindのbg-gradient-to-r / hover:scale / shadowで定番のSaaS LPボタン。この効果はTailwind CSSのユーティリティクラスを中心に構成され、クラスの組み合わせだけでアニメーションやホバー状態を表現します。

使いどころ

CTAボタン・フォーム送信ボタン・申し込みボタンなど、クリックを促したい箇所のアクセントに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。