CSSホバーアニメーション11選｜動くボタンの実装例付き

マウスを乗せるだけで背景がスッと広がったり、左右にスライドしたり、中央から放射状に変化したり…

ボタンにアニメーションを加えるだけでサイトの印象が変わります。

この記事では、ホバーアニメーション付きのボタンデザインを11種類まとめてご紹介。すべてHTML＋CSSのみ、コピペしてすぐに使える実装コード付きです。

「デザインに動きを加えたい」そんなときにご活用ください。

About meこの記事を書いた人

はるみです

ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。

＜実績＞

• ドメインパワー : 40（2025年6月時点）
• 2023年より有料記事公開
  累計450件（月間約20件）のご購入実績
• カスタマイズを丁寧にサポート

アニメーションボタン｜HTML構造の基本

すべてのホバーアニメーション付きボタンは、以下のようなシンプルなHTML構造をベースに作成します。

HTMLの基本構造

<div class="btn-container">
  <a href="#" class="btn-common [ボタン固有のクラス]">
    <span>ボタンのテキスト</span>
  </a>
</div>

各クラスやタグの役割

この構造を共通化しておくことで、HTMLは最小限の変更で済みます。ボタンの動きを切り替える際は、クラス名を変えるだけでOK。

アニメーション付きボタンの仕組み｜CSS構造

今回紹介するボタンアニメーションでは、transition プロパティを活用して滑らかな動きを表現しています。まだ transition の基本が曖昧な方は、以下の記事を先にチェックしておくと理解が深まります。

CSS Transitionの使い方｜簡単にスムーズなアニメーションを実現

「animation」プロパティは@keyframesと組み合わせて複雑なアニメーションを作成できますが、簡単な動きにはやや記述が冗長です。 詳しくは「CSSアニメーションの基本」でも解説しています。そこでこの記事では「transition...

turicco.com

アニメーション付きボタンは、以下の2つのCSSで構成されています。

CSSは必ず「共通スタイル＋個別アニメーションスタイル」のセットで記述します。

片方だけでは動かないので注意。

:root {
  --btn-color: #333; /* ボタンのカラーを設定 */
}

/* ボタンを囲むコンテナ */
.btn-container {
  text-align: center;
}

/* ボタンの基本スタイル */
.btn-common {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: inline-block;
  padding: 10px 20px;
  width: 250px;
  border: 2px solid var(--btn-color);
  margin: 5px;
  font-weight: bold;
}

/* ボタン内テキスト */
.btn-common span {
  position: relative;
  z-index: 3;
  color: var(--btn-color);
  transition: color 0.2s ease;
}

/* ホバー・フォーカス時のテキスト色 */
.btn-common:hover span {
  color: #fff;
}

/* 背景アニメーションのベース設定 */
.btn-common::before {
  content: '';
  position: absolute;
  z-index: 2;
  transition: all 0.3s ease-out;
}

アニメーションボタンのデモと実装コード

1. 中央から全体に広がる

<div class="btn-container">
  <a href="#" class="btn-common btn-grow"><span>中央から全体に広がる</span></a>
</div>

/* 中央から全体に広がる */
.btn-grow::before {
  background: var(--btn-color);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  transform-origin: center;
}
.btn-grow:hover::before {
  transform: scale(1);
}

2. 中央から縦全体に広がる

<div class="btn-container">
  <a href="#" class="btn-common btn-stretch"><span>中央から縦全体に広がる</span></a>
</div>

/* 中央から縦全体に広がる */
.btn-stretch::before {
  background: var(--btn-color);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: scaleY(0);
  transform-origin: center;
}
.btn-stretch:hover::before {
  transform: scaleY(1);
}

3. 中央から左右に広がる

<div class="btn-container">
  <a href="#" class="btn-common btn-spread"><span>中央から左右に広がる</span></a>
</div>

/* 中央から左右に広がる */
.btn-spread::before {
  background: var(--btn-color);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: center;
}
.btn-spread:hover::before {
  transform: scaleX(1);
}

4. 中央から放射状に広がる

<div class="btn-container">
  <a href="#" class="btn-common btn-radial"><span>中央から放射状に広がる</span></a>
</div>

/* 中央から放射状に広がる */
.btn-radial::before {
  background: var(--btn-color);
  width: 0;
  height: 0;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}
.btn-radial:hover::before {
  width: 400px;
  height: 400px;
}

5. 左からスライド

<div class="btn-container">
  <a href="#" class="btn-common btn-slide-left"><span>左からスライド</span></a>
</div>

/* 左からスライド */
.btn-slide-left::before {
  background: var(--btn-color);
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  transition: transform 0.3s ease;
}
.btn-slide-left:hover::before {
  transform: translateX(100%);
}

6. 右からスライド

<div class="btn-container">
  <a href="#" class="btn-common btn-slide-right"><span>右からスライド</span></a>
</div>

/* 右からスライド */
.btn-slide-right::before {
  background: var(--btn-color);
  width: 100%;
  height: 100%;
  top: 0;
  left: 100%;
  transition: transform 0.3s ease;
}
.btn-slide-right:hover::before {
  transform: translateX(-100%);
}

7. 斜めにスライド

<div class="btn-container">
  <a href="#" class="btn-common btn-skew"><span>斜めにスライド</span></a>
</div>

/* 斜めにスライド */
.btn-skew::before {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  background: var(--btn-color);
  width: 120%;
  height: 100%;
  transform: skewX(-25deg);
}
.btn-skew:hover::before {
  animation: skewanime 0.5s forwards;
}
@keyframes skewanime {
  100% {
    left: -10%;
  }
}

8. 上から下へスライド

<div class="btn-container">
  <a href="#" class="btn-common btn-slide-top"><span>上から下へスライド</span></a>
</div>

/* 上から下へスライド */
.btn-slide-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: var(--btn-color);
  width: 100%;
  height: 0;
  transition: height 0.3s ease;
}
.btn-slide-top:hover::before {
  height: 100%;
}

9. 下から上へスライド

<div class="btn-container">
  <a href="#" class="btn-common btn-slide-bottom"><span>下から上へスライド</span></a>
</div>

/* 下から上へスライド */
.btn-slide-bottom::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--btn-color);
  width: 100%;
  height: 0;
  transition: height 0.3s ease;
}
.btn-slide-bottom:hover::before {
  height: 100%;
}

10. 流れる背景（左から右）

<div class="btn-container">
  <a href="#" class="btn-common btn-fill-left"><span>流れる背景（左から右）</span></a>
</div>

/* 流れる背景（左から右） */
.btn-fill-left::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: var(--btn-color);
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: right top;
  transition: transform 0.3s ease-out;
}
.btn-fill-left:hover::before {
  transform-origin: left top;
  transform: scaleX(1);
}

11. 流れる背景（右から左）

<div class="btn-container">
  <a href="#" class="btn-common btn-fill-right"><span>流れる背景（右から左）</span></a>
</div>

/* 流れる背景（右から左） */
.btn-fill-right::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: var(--btn-color);
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left top;
  transition: transform 0.3s ease-out;
}
.btn-fill-right:hover::before {
  transform-origin: right top;
  transform: scaleX(1);
}

CSSボタンをカスタマイズするヒント

CSSボタンは基本構造がシンプルなので、ちょっとしたカスタマイズで見た目や動きを自由に変えられます

以下のポイントを参考にしてみてください。

色を変える

ボタンの背景色やテキスト色は、以下のプロパティを調整します。

• 背景色：background（または疑似要素 ::before の背景色）
• 文字色：color

例えば、:root 内の --btn-color を変更すれば一括で色を変更できます。

:root {
  --btn-color: #007bff; /* 青色に変更 */
}

角丸を追加する

丸みのあるボタンにしたい場合は、.btn-common に border-radius を追加します。

.btn-common {
  border-radius: 8px;
}

より丸みを強調したい場合は値を大きくしてください。

アニメーションの滑らかさを調整する

transition プロパティのイージング関数や時間を変えるだけでも、動きの印象が大きく変わります。

.btn-common::before {
  transition: all 0.6s ease-in-out;
}

• ease-in-out は動きの始まりと終わりが滑らか
• 時間（秒数）を長くするとゆったりとした動きに

ボタン以外にも、ページ全体にアニメーションを取り入れることで、より印象的なサイトに仕上がります。

サイトに「動き」をつけるCSSアニメーション｜基本的な指定方法を覚えよう

この記事では、CSSアニメーションの基本的な指定方法やプロパティの使い方について解説します。サイトに「動き」といえばJavascriptが必要？なイメージがあるかもしれませんが、アニメーションを使うことでCSSでもウェブページに動きをつける...

turicco.com

まとめ

CSSだけで作れる、動きのあるホバーボタン11種をご紹介しました。
サイトのアクセントや、CTA（行動喚起）ボタンに使えば注目度もアップします。

気に入ったスタイルがあれば、ぜひご自身のサイトに取り入れてみてください。