CSSアニメーション付きボタン集｜光る・広がる・矢印が動く – devsakaso

CSSアニメーションを使うと、ボタンに「押せそう」「次へ進めそう」という印象を加えられます。

この記事では、CSSだけで作れるアニメーション付きボタンを20個まとめました。光る、広がる、矢印が動く、押し込み、ローディング風など、コピーして使いやすい形で紹介します。

1. ふわっと浮くボタン

ホバー時に少し上へ動く、使いやすいアニメーションです。

<a href="#" class="btn-float">詳しく見る</a>

.btn-float {
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  text-decoration: none;
  background: #2563eb;
  border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-float:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
}

transform と box-shadow を組み合わせると、軽く浮いた印象になります。

2. 押し込みボタン

クリックできる感触を出したいときの定番です。

<button class="btn-press" type="button">押す</button>

.btn-press {
  padding: 12px 24px;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  background: #2563eb;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 5px 0 #1e40af;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-press:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #1e40af;
}

:active で押した瞬間の見た目を作ります。

3. 矢印が右に動くボタン

リンク先へ進む印象を出したいときに使えます。

<a href="#" class="btn-arrow">
  詳しく見る
  <span aria-hidden="true">→</span>
</a>

.btn-arrow {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}

.btn-arrow span {
  transition: transform 0.3s ease;
}

.btn-arrow:hover span {
  transform: translateX(5px);
}

装飾用の矢印には aria-hidden="true" を付けます。

4. 背景が左から広がるボタン

枠線ボタンに動きを付ける例です。

.btn-fill-left {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  overflow: hidden;
  color: #2563eb;
  text-decoration: none;
  border: 2px solid #2563eb;
  border-radius: 6px;
  transition: color 0.3s ease;
}

.btn-fill-left::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: #2563eb;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.btn-fill-left:hover {
  color: #fff;
}

.btn-fill-left:hover::before {
  transform: scaleX(1);
}

疑似要素をボタンの背景として使います。

5. 背景が下から上がるボタン

縦方向に背景が動くボタンです。

.btn-fill-up {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  overflow: hidden;
  color: #0f766e;
  text-decoration: none;
  border: 2px solid #0f766e;
  border-radius: 6px;
  transition: color 0.3s ease;
}

.btn-fill-up::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: #0f766e;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.btn-fill-up:hover {
  color: #fff;
}

.btn-fill-up:hover::before {
  transform: translateY(0);
}

上から下にしたい場合は、初期値を translateY(-100%) にします。

6. 光が通るボタン

短いCTAに使える、光が通るような表現です。

.btn-shine {
  position: relative;
  display: inline-block;
  padding: 12px 28px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: #111827;
  border-radius: 9999px;
}

.btn-shine::before {
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
}

.btn-shine:hover::before {
  animation: btnShine 0.8s ease;
}

@keyframes btnShine {
  to {
    left: 125%;
  }
}

光るアニメーションは目立つため、主要CTAなどに絞るとよいです。

7. ふわっと拡大するボタン

少しだけ大きくなるシンプルなホバーです。

.btn-scale {
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  text-decoration: none;
  background: #111827;
  border-radius: 6px;
  transition: transform 0.25s ease;
}

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

大きくしすぎると周囲の要素にぶつかるため、控えめにします。

8. 影だけ広がるボタン

要素のサイズを変えず、影で動きを出します。

.btn-shadow {
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  text-decoration: none;
  background: #0f766e;
  border-radius: 6px;
  transition: box-shadow 0.25s ease;
}

.btn-shadow:hover {
  box-shadow: 0 0 0 6px rgba(15, 118, 110, 0.16);
}

位置を動かしたくない場所では、影の変化だけでも十分です。

9. 点滅しないパルスボタン

外側にリングが広がる、控えめな注目表現です。

.btn-pulse {
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  text-decoration: none;
  background: #dc2626;
  border-radius: 9999px;
  animation: btnPulse 1.8s ease-out infinite;
}

@keyframes btnPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(220, 38, 38, 0);
  }
}

常時動くボタンは目立つため、ページ内に多用しないようにします。

10. 枠線が描かれるボタン

ホバー時に枠線が出るように見せる表現です。

.btn-border-draw {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  color: #111827;
  text-decoration: none;
}

.btn-border-draw::after {
  position: absolute;
  inset: 0;
  content: "";
  border: 2px solid #111827;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.btn-border-draw:hover::after {
  transform: scaleX(1);
}

枠線だけの動きは、控えめなサイトにも合わせやすいです。

11. 下線が伸びるテキストボタン

テキストリンクに近いボタンのアニメーションです。

.btn-line {
  position: relative;
  color: #111827;
  font-weight: 700;
  text-decoration: none;
}

.btn-line::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 2px;
  content: "";
  background: #2563eb;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.btn-line:hover::after {
  transform: scaleX(1);
}

本文リンクと混同しないよう、配置や太さを調整します。

12. アイコンが回転するボタン

アイコン付きボタンに少し遊びを入れる例です。

<a href="#" class="btn-icon-rotate">
  更新する
  <span aria-hidden="true">↻</span>
</a>

.btn-icon-rotate {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}

.btn-icon-rotate span {
  transition: transform 0.3s ease;
}

.btn-icon-rotate:hover span {
  transform: rotate(180deg);
}

回転は大きな動きなので、短いアイコンにだけ使うと自然です。

13. グラデーションが動くボタン

背景位置を動かして、グラデーションが流れるように見せます。

.btn-gradient-move {
  display: inline-block;
  padding: 12px 26px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(90deg, #2563eb, #0f766e, #2563eb);
  background-size: 200% 100%;
  border-radius: 9999px;
  transition: background-position 0.4s ease;
}

.btn-gradient-move:hover {
  background-position: 100% 0;
}

色数を増やしすぎないと、使いやすいCTAになります。

14. 波紋が広がるボタン

クリックできそうな印象を出す、疑似要素の波紋表現です。

.btn-ripple {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: #2563eb;
  border-radius: 6px;
}

.btn-ripple::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0);
  transition: transform 0.35s ease;
  border-radius: inherit;
}

.btn-ripple:hover::after {
  transform: scale(1);
}

疑似要素が文字を隠さないように、透明度を低めにします。

15. ローディング風スピナーボタン

送信中の見た目をCSSで作る例です。実際の状態切り替えはJavaScriptなどで行います。

<button class="btn-loading" type="button">
  <span></span>
  送信中
</button>

.btn-loading {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 12px 24px;
  color: #fff;
  font: inherit;
  background: #111827;
  border: 0;
  border-radius: 6px;
}

.btn-loading span {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin 0.8s linear infinite;
}

@keyframes btnSpin {
  to {
    transform: rotate(360deg);
  }
}

ローディング全般は、ローディングアニメーション記事に分けます。

16. 3点が動くローディングボタン

「処理中」を小さく見せる3点アニメーションです。

<button class="btn-dots" type="button">
  読み込み中<span></span>
</button>

.btn-dots {
  padding: 12px 24px;
  color: #fff;
  font: inherit;
  background: #2563eb;
  border: 0;
  border-radius: 6px;
}

.btn-dots span::after {
  content: "...";
  animation: btnDots 1.2s steps(4, end) infinite;
}

@keyframes btnDots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75%,
  100% {
    content: "...";
  }
}

文字が動くため、横幅が変わっても違和感が少ない場所で使います。

17. スキュー背景が走るボタン

斜めの背景が横切るようなアニメーションです。

.btn-skew {
  position: relative;
  display: inline-block;
  padding: 12px 26px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: #111827;
  border-radius: 6px;
}

.btn-skew::before {
  position: absolute;
  top: 0;
  left: -40%;
  width: 35%;
  height: 100%;
  content: "";
  background: rgba(255, 255, 255, 0.24);
  transform: skewX(-20deg);
  transition: left 0.35s ease;
}

.btn-skew:hover::before {
  left: 110%;
}

光るボタンより控えめなアクセントとして使えます。

18. フォーカス時も動きがわかるボタン

キーボード操作でもフォーカス位置がわかるようにします。

.btn-focus-motion {
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  text-decoration: none;
  background: #0f766e;
  border-radius: 6px;
  transition: transform 0.2s ease, outline-offset 0.2s ease;
}

.btn-focus-motion:hover,
.btn-focus-motion:focus-visible {
  transform: translateY(-2px);
}

.btn-focus-motion:focus-visible {
  outline: 3px solid rgba(15, 118, 110, 0.3);
  outline-offset: 4px;
}

ホバーだけでなく、:focus-visible も用意すると使いやすくなります。

19. 動きを減らす設定

動きが苦手なユーザー向けに、prefers-reduced-motion を入れておくと安心です。

@media (prefers-reduced-motion: reduce) {
  .btn-float,
  .btn-scale,
  .btn-shadow,
  .btn-focus-motion,
  .btn-arrow span,
  .btn-icon-rotate span,
  .btn-shine::before,
  .btn-pulse,
  .btn-loading span {
    transition: none;
    animation: none;
  }
}

常時動くアニメーションを使う場合は、特にこの指定を入れておきます。

20. ボタンアニメーションの最小テンプレート

最後に、使い回しやすい基本テンプレートです。

<a href="#" class="btn-motion-template">詳しく見る</a>

.btn-motion-template {
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  background: #2563eb;
  border-radius: 6px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-motion-template:hover,
.btn-motion-template:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22);
}

浮く、影が出る、フォーカスでもわかる、の3点を入れた使いやすい形です。

ボタンアニメーションで失敗しやすいポイント

動きが大きすぎて、周囲のレイアウトとぶつかる
常時動くボタンをページ内に多用している
ホバーだけに対応していて、キーボード操作のフォーカスが見えない
transition: all; で不要なプロパティまで動かしている
prefers-reduced-motion を用意していない

まとめ

CSSボタンアニメーションは、transform、transition、box-shadow、疑似要素を中心に作ると扱いやすいです。

通常のボタンデザインは CSSボタンデザイン集、hover全般は CSSホバーエフェクト集へ分けると、記事同士の役割が明確になります。