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

【コピペOK】グラデーション系ボタンホバーアニメーション完全ガイド｜6種類

2025-07-252025-07-26

ケケンタ

グラデーションを使ったボタンホバーアニメーションを実装したい……

ケケンタ

美しいグラデーション効果でボタンを魅力的にしたい……

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

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

をご紹介します。

6種類のグラデーションアニメーション効果を完全網羅した実装なので、いままさに「美しいグラデーションボタンを作りたい！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するグラデーション系ボタンホバーアニメーション

グラデーション回転（グラデーションが回転する効果）
グラデーションスライド（グラデーションがスライドする効果）
グラデーションスケール（グラデーションがスケールする効果）
グラデーションフリップ（グラデーションがフリップする効果）
グラデーションパルス（グラデーションがパルスする効果）
グラデーション変形（グラデーションが変形する効果）

ケケンタ

特にランディングページやポートフォリオサイトには、グラデーション系ボタンホバーアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSのみで実装するので、JavaScriptが不要で軽量なインタラクションを実現できます。

あわせて読みたい

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

【コピペOK】3Dボタンホバーアニメーション完全ガイド｜6種類の実装方法

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

ケケンタ

ケケンタの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調べ-詳細)

グラデーション系ボタンホバーアニメーションとは

グラデーション系ボタンホバーアニメーションは、CSSグラデーションを使用してボタンに美しい色彩変化を与えるアニメーションです。ユーザーの注目を集め、視覚的な魅力を向上させるための手法です。

効果的な使用場面

適している場面

ランディングページ
ポートフォリオサイト
ブランドサイト
エンターテイメントサイト
プレミアムサイト

避けるべき場面

ビジネスサイト
ニュースサイト
アクセシビリティを重視する場面
過度に使用した場合

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
グラデーション回転	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
グラデーションスライド	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
グラデーションスケール	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
グラデーションフリップ	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
グラデーションパルス	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
グラデーション変形	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐

グラデーション回転

① デモ

長めにホバーしてみてください

See the Pen グラデーション回転 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このグラデーション回転の特徴

グラデーションが回転する効果
美しい色彩変化
視覚的インパクト大
モダンな印象

② HTML

<div class="button-container">
  <button class="gradient-rotate-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-rotate-btn {
  position: relative;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c);
  background-size: 400% 400%;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.gradient-rotate-btn:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  animation: gradientRotate 2s ease infinite;
}

@keyframes gradientRotate {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.btn-text {
  display: block;
}

④ カスタマイズ例

/* グラデーション色の変更 */
.gradient-rotate-btn {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
  background-size: 400% 400%;
}

/* 回転速度の変更 */
.gradient-rotate-btn:hover {
  animation: gradientRotate 1s ease infinite;
}

/* グラデーションサイズの変更 */
.gradient-rotate-btn {
  background-size: 300% 300%;
}

グラデーションスライド

① デモ

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(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  background-size: 200% 100%;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

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

.btn-text {
  display: block;
}

④ カスタマイズ例

/* グラデーション色の変更 */
.gradient-slide-btn {
  background: linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
  background-size: 200% 100%;
}

/* スライド速度の変更 */
.gradient-slide-btn {
  transition: all 0.5s ease;
}

/* スライド方向の変更 */
.gradient-slide-btn {
  background: linear-gradient(180deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  background-size: 100% 200%;
}

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

グラデーションスケール

① デモ

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

このグラデーションスケールの特徴

グラデーションがスケールする効果
動的な色彩変化
視覚的インパクト大
立体的な印象

② HTML

<div class="button-container">
  <button class="gradient-scale-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-scale-btn {
  position: relative;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: radial-gradient(circle, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  overflow: hidden;
}

.gradient-scale-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, #f093fb 0%, #f5576c 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  z-index: -1;
}

.gradient-scale-btn:hover::before {
  width: 300px;
  height: 300px;
}

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

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

④ カスタマイズ例

/* グラデーション色の変更 */
.gradient-scale-btn::before {
  background: radial-gradient(circle, #ff6b6b 0%, #4ecdc4 100%);
}

/* スケール速度の変更 */
.gradient-scale-btn::before {
  transition: all 0.5s ease;
}

/* スケールサイズの変更 */
.gradient-scale-btn:hover::before {
  width: 400px;
  height: 400px;
}

グラデーションフリップ

① デモ

See the Pen グラデーションフリップ by ケケンタ (@lgshifbg-the-looper) on CodePen.

このグラデーションフリップの特徴

グラデーションがフリップする効果
立体的な表現
視覚的インパクト大
インタラクティブな印象

② HTML

<div class="button-container">
  <div class="flip-container">
    <button class="gradient-flip-btn">
      <div class="flip-front">
        <span class="btn-text">グラデーションフリップ</span>
      </div>
      <div class="flip-back">
        <span class="btn-text">ホバー効果</span>
      </div>
    </button>
  </div>
</div>

③ CSS

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

.flip-container {
  perspective: 1000px;
}

.gradient-flip-btn {
  position: relative;
  width: 250px;
  height: 60px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: white;
  border-radius: 8px;
  backface-visibility: hidden;
}

.flip-front {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: rotateY(0deg);
}

.flip-back {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  transform: rotateY(180deg);
}

.gradient-flip-btn:hover {
  transform: rotateY(180deg);
}

.btn-text {
  display: block;
}

④ カスタマイズ例

/* フリップ速度の変更 */
.gradient-flip-btn {
  transition: transform 0.8s ease;
}

/* フリップ軸の変更 */
.gradient-flip-btn:hover {
  transform: rotateX(180deg);
}

/* グラデーション色の変更 */
.flip-back {
  background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
}

グラデーションパルス

① デモ

長めにホバーしてみてください

See the Pen グラデーションパルス by ケケンタ (@lgshifbg-the-looper) on CodePen.

このグラデーションパルスの特徴

グラデーションがパルスする効果
動的な色彩変化
視覚的インパクト大
注目を集める効果

② HTML

<div class="button-container">
  <button class="gradient-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;
}

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

.gradient-pulse-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  animation: gradientPulse 1.5s ease infinite;
}

@keyframes gradientPulse {
  0% {
    background-position: 0% 50%;
    transform: translateY(-2px) scale(1);
  }
  50% {
    background-position: 100% 50%;
    transform: translateY(-2px) scale(1.05);
  }
  100% {
    background-position: 0% 50%;
    transform: translateY(-2px) scale(1);
  }
}

.btn-text {
  display: block;
}

④ カスタマイズ例

/* グラデーション色の変更 */
.gradient-pulse-btn {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
  background-size: 400% 400%;
}

/* パルス速度の変更 */
.gradient-pulse-btn:hover {
  animation: gradientPulse 1s ease infinite;
}

/* パルスサイズの変更 */
@keyframes gradientPulse {
  0% {
    background-position: 0% 50%;
    transform: translateY(-2px) scale(1);
  }
  50% {
    background-position: 100% 50%;
    transform: translateY(-2px) scale(1.1);
  }
  100% {
    background-position: 0% 50%;
    transform: translateY(-2px) scale(1);
  }
}

グラデーション変形

① デモ

See the Pen グラデーション変形 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このグラデーション変形の特徴

グラデーションが変形する効果
動的な色彩変化
視覚的インパクト大
革新的な印象

② HTML

<div class="button-container">
  <button class="gradient-morph-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-morph-btn {
  position: relative;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  overflow: hidden;
}

.gradient-morph-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
  transform: translateX(-100%) skewX(-15deg);
  transition: transform 0.3s ease;
  z-index: -1;
}

.gradient-morph-btn:hover::before {
  transform: translateX(0) skewX(-15deg);
}

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

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

④ カスタマイズ例

/* グラデーション色の変更 */
.gradient-morph-btn::before {
  background: linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 100%);
}

/* 変形速度の変更 */
.gradient-morph-btn::before {
  transition: transform 0.5s ease;
}

/* 変形角度の変更 */
.gradient-morph-btn::before {
  transform: translateX(-100%) skewX(-30deg);
}

.gradient-morph-btn:hover::before {
  transform: translateX(0) skewX(-30deg);
}