CSS Tips | 超実務コアCSSテクニック：UIパーツ － ボタンホバーアニメ

Web APP CSS
スポンサーリンク

ボタンホバーアニメは「クリック前のワクワク」をデザインする

ボタンって、ただ押せればいいパーツじゃなくて 「ここを押すと何かが始まる」という期待を伝える場所でもあります。

ホバーアニメーションは、 その“期待”を視覚的に伝えるための小さな演出。 やりすぎると鬱陶しいけれど、ちょうどいい揺らぎを入れると UI が一気に生きます。

ここでは、 シンプルな色変化から、少し攻めたアンダーライン・グラデーション演出まで CSS と Tailwind でかみ砕いて解説していきます。

基本の考え方：ホバーアニメは「変化量」と「時間」がすべて

変化させる要素

背景色 文字色 影（box-shadow） 位置（transform） 境界線・下線 グラデーション

どれをどれくらい動かすかで、印象が変わります。

時間（transition-duration）が短すぎると「カクッ」とする

transition: 0.15s〜0.25s あたりが、 「気持ちよく変化して、でももたつかない」ラインです。

例1：一番基本の「色＋影」ホバーアニメ

CSS 版

.btn-basic {
  background: #2563eb;
  color: #ffffff;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-basic:hover {
  background: #1d4ed8;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.45);
  transform: translateY(-1px);
}
CSS
<button class="btn-basic">
  基本ホバー
</button>
HTML

Tailwind 版

<button
  class="px-5 py-2.5 rounded-full font-semibold text-sm
         bg-sky-600 text-white
         shadow-[0_10px_25px_rgba(37,99,235,0.35)]
         hover:bg-sky-700
         hover:shadow-[0_14px_30px_rgba(37,99,235,0.45)]
         hover:-translate-y-[1px]
         transition">
  基本ホバー
</button>
HTML

ここを深掘り：影と位置の変化が「押したくなる感」を作る

背景色だけ変えるより、 影を少し強くして、ボタンをほんの少しだけ上に動かすと 「浮き上がる」感じが出ます。

この“浮き上がり感”が、 「ここ、押せるよ」という視覚的なサインになります。

例2：アウトラインボタンの「塗りつぶし」ホバー

CSS 版

.btn-outline {
  color: #2563eb;
  border: 2px solid currentColor;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  background: transparent;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-outline:hover {
  background: #2563eb;
  color: #ffffff;
}
CSS
<button class="btn-outline">
  塗りつぶしホバー
</button>
HTML

Tailwind 版

<button
  class="px-5 py-2.5 rounded-full font-semibold text-sm
         text-sky-600 border-2 border-current
         bg-transparent
         hover:bg-sky-600 hover:text-white
         transition">
  塗りつぶしホバー
</button>
HTML

深掘りポイント：currentColor で色の一貫性を保つ

border: 2px solid currentColor; にしておくと、 文字色を変えるだけでボーダー色も揃います。

Tailwind では border-current を使うことで、 text-sky-600 とボーダー色を連動させられます。

例3：下線がスライドしてくる「テキストボタン」ホバー

CSS 版

.btn-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #2563eb;
  font-weight: 500;
  padding-bottom: 0.15rem;
}

.btn-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: currentColor;
  transition: width 0.2s ease;
}

.btn-underline:hover::after {
  width: 100%;
}
CSS
<button class="btn-underline">
  テキストボタン
</button>
HTML

Tailwind 版

<button
  class="relative inline-flex items-center gap-1
         text-sky-600 font-medium pb-[2px]
         after:content-[''] after:absolute after:left-0 after:bottom-0
         after:h-[2px] after:w-0 after:bg-current
         after:transition-[width]
         after:duration-200
         hover:after:w-full">
  テキストボタン
</button>
HTML

深掘りポイント：擬似要素で「動く線」を作る

ボタン本体は動かさず、 ::after で下線だけをアニメーションさせると、 軽くて上品なホバーになります。

テキストリンクや「もっと見る」ボタンに相性抜群です。

例4：グラデーションが流れるホバー（少し攻めた演出）

CSS 版

.btn-gradient {
  position: relative;
  overflow: hidden;
  padding: 0.6rem 1.6rem;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #3b82f6, #ec4899);
  font-weight: 600;
}

.btn-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #22c55e, #3b82f6);
  opacity: 0;
  transform: translateX(-20%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.btn-gradient:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.btn-gradient span {
  position: relative;
}
CSS
<button class="btn-gradient">
  <span>グラデーションホバー</span>
</button>
HTML

Tailwind 版

<button
  class="relative overflow-hidden px-6 py-2.5 rounded-full font-semibold text-sm
         text-white bg-[linear-gradient(135deg,#3b82f6,#ec4899)]">
  <span class="relative">グラデーションホバー</span>
  <span
    class="absolute inset-0
           bg-[linear-gradient(135deg,#22c55e,#3b82f6)]
           opacity-0 -translate-x-[20%]
           transition
           hover:opacity-100 hover:translate-x-0">
  </span>
</button>
HTML

（Tailwind 版は少しトリッキーなので、実務では CSS クラス化の方が現実的です）

深掘りポイント：重ねたレイヤーを動かす

ベースのグラデーションの上に、 別のグラデーションレイヤーを重ねて、 ホバー時にスライドさせることで「色が流れる」ような演出になります。

LP のメイン CTA ボタンなど、 「ここだけ特別感を出したい」場所に向いています。

例5：アイコン付きボタンの「矢印だけ動く」ホバー

CSS 版

.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  background: #0f172a;
  color: #f9fafb;
  font-weight: 500;
  transition: background 0.2s ease;
}

.btn-arrow svg {
  transition: transform 0.2s ease;
}

.btn-arrow:hover {
  background: #020617;
}

.btn-arrow:hover svg {
  transform: translateX(3px);
}
CSS
<button class="btn-arrow">
  もっと見る
  <svg viewBox="0 0 24 24" width="18" height="18">
    <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" fill="none" />
  </svg>
</button>
HTML

Tailwind 版

<button
  class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full
         bg-slate-900 text-slate-50 text-sm font-medium
         hover:bg-black transition">
  <span>もっと見る</span>
  <svg
    viewBox="0 0 24 24"
    class="w-4 h-4 stroke-current transition-transform group-hover:translate-x-[3px]">
    <path d="M5 12h14M13 6l6 6-6 6" stroke-width="2" fill="none" />
  </svg>
</button>
HTML

（Tailwind でアイコンだけ動かしたいときは group を使うのが定番です）

深掘りポイント：全部動かさず「一部だけ」動かす

ボタン全体を動かすより、 矢印だけ少し動かす方が、 情報として「進む」「次へ」という意味が強く伝わります。

ホバーアニメは「何を動かすか」がメッセージになる、 という感覚を持っておくと設計が楽になります。

ボタンホバーアニメ設計の重要ポイント

変化しすぎない

色・影・位置・グラデーション・サイズ… 全部を一度に動かすと「落ち着かないボタン」になります。

基本は 色＋影 色＋位置 線だけ のように、2〜3要素に絞ると上品になります。

速度と距離を小さくする

transition: 0.2s 前後 translateY(-1px〜-2px) shadow の差も少しだけ

このくらいの「控えめな変化」が、 プロっぽい UI にはちょうどいいです。

ホバーできない環境も意識する

スマホではホバーがないので、 ホバーアニメに頼りすぎず、 ボタン自体の形・色・余白で「押せる感」を出しておくことが大事です。

そのまま使える「汎用ホバーボタン」テンプレート（Tailwind）

<button
  class="inline-flex items-center justify-center
         px-5 py-2.5 rounded-full text-sm font-semibold
         bg-sky-600 text-white
         shadow-[0_10px_25px_rgba(37,99,235,0.35)]
         hover:bg-sky-700
         hover:shadow-[0_14px_30px_rgba(37,99,235,0.45)]
         hover:-translate-y-[1px]
         transition">
  アクション
</button>
HTML

この一行をベースに、 色だけ変えればどんなブランドにも合わせられます。

さいごに

ボタンホバーアニメは、 「押せる」「今ここにフォーカスがある」ということを さりげなく伝えるための小さなジェスチャーです。

派手さより「気持ちよさ」を優先して、 変化量と時間を丁寧に設計していくと、 ページ全体の“質感”が一段上がります。

もし、今作っているボタン（LPのメインCTA、フォーム送信ボタンなど）があれば、 その具体的なボタンを題材にして、一緒にホバーアニメをチューニングしてみよう。

スポンサーリンク
タイトルとURLをコピーしました