この記事にはプロモーションが含まれています。

【コピペOK】モダンボタンホバーアニメーション完全ガイド｜8種類の実装

2025-07-24

ケケンタ

ボタンにモダンなホバー効果を実装したい……

ケケンタ

ユーザーを惹きつけるボタンデザインを作りたい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において人気の高いアニメーション効果
モダンボタンホバーアニメーション

をご紹介します。

8種類のモダンなホバー効果を完全網羅した実装なので、いままさに「魅力的なボタンを作りたい！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するモダンボタンホバーアニメーション

グラデーションスライド効果（背景グラデーションがスライド）
3Dリフト効果（ボタンが浮き上がる3D効果）
ボーダーアニメーション（複数ライン）
アイコン回転効果（アイコンが回転する効果）
テキストスライド効果（テキストがスライドする効果）
パルス効果（脈動する効果）
マグネット効果（マウスに引き寄せられる効果）
スプリット効果（ボタンが分割される効果）

ケケンタ

特にCTAボタンやナビゲーションボタンには、モダンボタンホバーアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptを組み合わせて実装するので、より高度なインタラクションを実現できます。

【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】

【コピペOK】背景アニメーション完全ガイド｜5種類【HTML】

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

¥3,000 (2025/07/25 20:06:07時点 Amazon調べ-詳細)

モダンボタンホバーアニメーションとは

モダンボタンホバーアニメーションは、マウスホバー時にボタンに視覚的な変化を与えるアニメーション効果です。ユーザーの注目を集め、インタラクションを促進するための手法です。

効果的な使用場面

適している場面

CTAボタン（Call to Action）
ナビゲーションボタン
フォーム送信ボタン
カードのアクションボタン
モーダルボタン

避けるべき場面

過度に複雑なアニメーション
読みやすさを重視する場面
アクセシビリティを重視する場面
過度に使用した場合

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
グラデーションスライド効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
3Dリフト効果	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
ボーダーアニメーション	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
アイコン回転効果	⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
テキストスライド効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
パルス効果	⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
マグネット効果	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
スプリット効果	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐

グラデーションスライド効果

① デモ

See the Pen グラデーションスライド効果 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このグラデーションスライド効果の特徴

背景グラデーションがスライド
モダンで洗練された印象
視覚的インパクト大
スムーズな動き

② HTML

<div class="button-container">
  <button class="gradient-slide-btn">
    <span class="btn-text">グラデーションスライド</span>
  </button>
</div>

③ CSS

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  background: #f8f9fa;
  padding: 2rem;
}

.gradient-slide-btn {
  position: relative;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.gradient-slide-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  transition: left 0.5s ease;
  z-index: 1;
}

.gradient-slide-btn:hover::before {
  left: 0;
}

.btn-text {
  position: relative;
  z-index: 2;
}

.gradient-slide-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const gradientBtn = document.querySelector('.gradient-slide-btn');

  // ホバー時の追加効果
  gradientBtn.addEventListener('mouseenter', function() {
    this.style.transform = 'translateY(-3px) scale(1.05)';
  });

  gradientBtn.addEventListener('mouseleave', function() {
    this.style.transform = 'translateY(0) scale(1)';
  });
});

⑤ カスタマイズ例

/* カラーテーマ変更 */
.gradient-slide-btn::before {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}

/* アニメーション速度変更 */
.gradient-slide-btn::before {
  transition: left 0.8s ease;
}

/* 角丸の変更 */
.gradient-slide-btn {
  border-radius: 10px;
}

/* 影効果の強化 */
.gradient-slide-btn:hover {
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5);
}

3Dリフト効果

① デモ

See the Pen 3Dリフト効果 by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3Dリフト効果の特徴

ボタンが浮き上がる3D効果
立体的な表現
視覚的インパクト大
モダンな印象

② HTML

<div class="button-container">
  <button class="lift-3d-btn">
    <span class="btn-text">3Dリフト効果</span>
  </button>
</div>

③ CSS

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  background: #f8f9fa;
  padding: 2rem;
}

.lift-3d-btn {
  position: relative;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.06);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.lift-3d-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  border-radius: 12px;
  transform: translateZ(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lift-3d-btn:hover {
  transform: translateY(-8px) rotateX(10deg);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 10px 20px rgba(0, 0, 0, 0.1);
}

.lift-3d-btn:hover::before {
  transform: translateZ(-20px);
}

.btn-text {
  position: relative;
  z-index: 1;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const liftBtn = document.querySelector('.lift-3d-btn');

  // マウス移動に応じた3D効果
  liftBtn.addEventListener('mousemove', function(e) {
    const rect = this.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const centerX = rect.width / 2;
    const centerY = rect.height / 2;

    const rotateX = (y - centerY) / 10;
    const rotateY = (centerX - x) / 10;

    this.style.transform = `translateY(-8px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
  });

  liftBtn.addEventListener('mouseleave', function() {
    this.style.transform = 'translateY(0) rotateX(0) rotateY(0)';
  });
});

⑤ カスタマイズ例

/* 浮き上がり幅の変更 */
.lift-3d-btn:hover {
  transform: translateY(-12px) rotateX(15deg);
}

/* 影効果の強化 */
.lift-3d-btn:hover {
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.2),
    0 15px 30px rgba(0, 0, 0, 0.15);
}

/* 回転角度の変更 */
.lift-3d-btn:hover {
  transform: translateY(-8px) rotateX(5deg) rotateY(5deg);
}

ボーダーアニメーション（複数ライン）

① デモ

See the Pen ボーダーアニメーション（複数ライン） by ケケンタ (@lgshifbg-the-looper) on CodePen.

このボーダーアニメーションの特徴

複数のボーダーラインがアニメーション
エレガントな効果
視覚的インパクト大
洗練された印象

② HTML

<div class="button-container">
  <button class="border-animation-btn">
    <span class="btn-text">ボーダーアニメーション</span>
  </button>
</div>

③ CSS

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  background: #f8f9fa;
  padding: 2rem;
}

.border-animation-btn {
  position: relative;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  background: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

.border-animation-btn::before,
.border-animation-btn::after {
  content: '';
  position: absolute;
  background: linear-gradient(45deg, #667eea, #764ba2);
  transition: all 0.3s ease;
}

.border-animation-btn::before {
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
}

.border-animation-btn::after {
  bottom: 0;
  right: 0;
  width: 2px;
  height: 0;
}

.border-animation-btn:hover::before {
  width: 100%;
}

.border-animation-btn:hover::after {
  height: 100%;
}

.border-animation-btn .btn-text {
  position: relative;
  z-index: 1;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const borderBtn = document.querySelector('.border-animation-btn');

  // ホバー時の追加効果
  borderBtn.addEventListener('mouseenter', function() {
    this.style.transform = 'scale(1.05)';
    this.style.boxShadow = '0 8px 25px rgba(102, 126, 234, 0.2)';
  });

  borderBtn.addEventListener('mouseleave', function() {
    this.style.transform = 'scale(1)';
    this.style.boxShadow = 'none';
  });
});

⑤ カスタマイズ例

/* ボーダー色の変更 */
.border-animation-btn::before,
.border-animation-btn::after {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}

/* アニメーション速度の変更 */
.border-animation-btn::before,
.border-animation-btn::after {
  transition: all 0.5s ease;
}

/* ボーダー幅の変更 */
.border-animation-btn::before {
  height: 3px;
}

アイコン回転効果

① デモ

See the Pen アイコン回転効果 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このアイコン回転効果の特徴

アイコンが回転する効果
シンプルで効果的
視覚的インパクト大
インタラクティブな印象

② HTML

<div class="button-container">
  <button class="icon-rotate-btn">
    <span class="btn-text">アイコン回転</span>
    <span class="btn-icon">→</span>
  </button>
</div>

③ CSS

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  background: #f8f9fa;
  padding: 2rem;
}

.icon-rotate-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-icon {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.icon-rotate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

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

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const iconBtn = document.querySelector('.icon-rotate-btn');

  // ホバー時の追加効果
  iconBtn.addEventListener('mouseenter', function() {
    this.style.transform = 'translateY(-3px) scale(1.05)';
  });

  iconBtn.addEventListener('mouseleave', function() {
    this.style.transform = 'translateY(0) scale(1)';
  });
});

⑤ カスタマイズ例

/* 回転角度の変更 */
.icon-rotate-btn:hover .btn-icon {
  transform: rotate(90deg);
}

/* 回転速度の変更 */
.btn-icon {
  transition: transform 0.5s ease;
}

/* アイコンサイズの変更 */
.btn-icon {
  font-size: 20px;
}

テキストスライド効果

① デモ

See the Pen テキストスライド効果 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このテキストスライド効果の特徴

テキストがスライドする効果
動的な表現
視覚的インパクト大
モダンな印象

② HTML

<div class="button-container">
  <button class="text-slide-btn">
    <span class="btn-text-original">テキストスライド</span>
    <span class="btn-text-hover">ホバー効果</span>
  </button>
</div>

③ CSS

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  background: #f8f9fa;
  padding: 2rem;
}

.text-slide-btn {
  position: relative;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-text-original,
.btn-text-hover {
  display: block;
  transition: transform 0.3s ease;
}

.btn-text-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
  color: #ffd700;
}

.text-slide-btn:hover .btn-text-original {
  transform: translateY(-100%);
}

.text-slide-btn:hover .btn-text-hover {
  transform: translate(-50%, -50%);
}

.text-slide-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const textSlideBtn = document.querySelector('.text-slide-btn');

  // ホバー時の追加効果
  textSlideBtn.addEventListener('mouseenter', function() {
    this.style.transform = 'translateY(-3px) scale(1.05)';
  });

  textSlideBtn.addEventListener('mouseleave', function() {
    this.style.transform = 'translateY(0) scale(1)';
  });
});

⑤ カスタマイズ例

/* スライド方向の変更 */
.btn-text-hover {
  transform: translate(-50%, -100%);
}

.text-slide-btn:hover .btn-text-hover {
  transform: translate(-50%, -50%);
}

/* アニメーション速度の変更 */
.btn-text-original,
.btn-text-hover {
  transition: transform 0.5s ease;
}

/* ホバーテキスト色の変更 */
.btn-text-hover {
  color: #ff6b6b;
}

パルス効果

① デモ

See the Pen パルス効果 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このパルス効果の特徴

脈動する効果
注目を集める
視覚的インパクト大
動的な印象

② HTML

<div class="button-container">
  <button class="pulse-btn">
    <span class="btn-text">パルス効果</span>
  </button>
</div>

③ CSS

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  background: #f8f9fa;
  padding: 2rem;
}

.pulse-btn {
  position: relative;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.pulse-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50px;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.7;
  z-index: -1;
  transition: all 0.3s ease;
}

.pulse-btn:hover::before {
  transform: translate(-50%, -50%) scale(1.2);
  opacity: 0;
}

.pulse-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.btn-text {
  position: relative;
  z-index: 1;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const pulseBtn = document.querySelector('.pulse-btn');

  // ホバー時の追加効果
  pulseBtn.addEventListener('mouseenter', function() {
    this.style.transform = 'scale(1.08)';
  });

  pulseBtn.addEventListener('mouseleave', function() {
    this.style.transform = 'scale(1)';
  });
});

⑤ カスタマイズ例

/* パルスサイズの変更 */
.pulse-btn:hover::before {
  transform: translate(-50%, -50%) scale(1.5);
}

/* パルス速度の変更 */
.pulse-btn::before {
  transition: all 0.5s ease;
}

/* パルス色の変更 */
.pulse-btn::before {
  background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
}

マグネット効果

① デモ

See the Pen 【ボタンホバー】マグネット効果 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このマグネット効果の特徴

マウスに引き寄せられる効果
インタラクティブ
視覚的インパクト大
ユニークな印象

② HTML

<div class="button-container">
  <button class="magnet-btn">
    <span class="btn-text">マグネット効果</span>
  </button>
</div>

③ CSS

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  background: #f8f9fa;
  padding: 2rem;
}

.magnet-btn {
  position: relative;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.magnet-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.btn-text {
  position: relative;
  z-index: 1;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const magnetBtn = document.querySelector('.magnet-btn');

  // マグネット効果
  magnetBtn.addEventListener('mousemove', function(e) {
    const rect = this.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const centerX = rect.width / 2;
    const centerY = rect.height / 2;

    const deltaX = (x - centerX) / centerX;
    const deltaY = (y - centerY) / centerY;

    this.style.transform = `translate(${deltaX * 10}px, ${deltaY * 10}px) scale(1.05)`;
  });

  magnetBtn.addEventListener('mouseleave', function() {
    this.style.transform = 'translate(0, 0) scale(1)';
  });
});

⑤ カスタマイズ例

/* マグネット強度の変更 */
.magnet-btn:hover {
  transform: scale(1.08);
}

/* 影効果の強化 */
.magnet-btn:hover {
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5);
}

スプリット効果

① デモ

See the Pen 【ボタンホバー】スプリット効果 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスプリット効果の特徴

ボタンが分割される効果
ユニークな表現
視覚的インパクト大
革新的な印象

② HTML

<div class="button-container">
  <button class="split-btn">
    <span class="btn-text">スプリット効果</span>
    <span class="btn-split-left"></span>
    <span class="btn-split-right"></span>
  </button>
</div>

③ CSS

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  background: #f8f9fa;
  padding: 2rem;
}

.split-btn {
  position: relative;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-split-left,
.btn-split-right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
  transition: all 0.3s ease;
}

.btn-split-left {
  left: 0;
  transform: translateX(-100%);
}

.btn-split-right {
  right: 0;
  transform: translateX(100%);
}

.split-btn:hover .btn-split-left {
  transform: translateX(0);
}

.split-btn:hover .btn-split-right {
  transform: translateX(0);
}

.split-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.btn-text {
  position: relative;
  z-index: 1;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const splitBtn = document.querySelector('.split-btn');

  // ホバー時の追加効果
  splitBtn.addEventListener('mouseenter', function() {
    this.style.transform = 'scale(1.08)';
  });

  splitBtn.addEventListener('mouseleave', function() {
    this.style.transform = 'scale(1)';
  });
});

⑤ カスタマイズ例

/* スプリット色の変更 */
.btn-split-left,
.btn-split-right {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* スプリット速度の変更 */
.btn-split-left,
.btn-split-right {
  transition: all 0.5s ease;
}

/* スプリット方向の変更 */
.btn-split-left {
  transform: translateY(-100%);
}

.btn-split-right {
  transform: translateY(100%);
}