AIでボタンのホバーエフェクトを作る【CSS生成・5パターン】

ホバー時に動きのあるボタンはクリック率を高める効果があります。CSSだけで作れる代表的な5パターンをAIに生成してもらいましょう。

AIへのプロンプト例（まとめて生成）

ボタンのホバーエフェクトを5パターン作ってください。
それぞれ別のclassで管理し、HTMLとCSSをまとめて出力してください。
パターン：
1. 背景色がスライドして塗りつぶされるボタン
2. アウトライン（枠線）だけで、ホバーで塗りつぶされるボタン
3. 矢印がスライドインするボタン
4. 波紋が広がるリップルエフェクトのボタン（CSSのみ）
5. 上に浮き上がる影つきボタン

生成されたHTML例

<button class="btn-slide">スライドボタン</button>
<button class="btn-outline">アウトラインボタン</button>
<button class="btn-arrow">矢印ボタン <span>→</span></button>
<button class="btn-ripple">リップルボタン</button>
<button class="btn-float">フロートボタン</button>

生成されたCSS例

/* 共通スタイル */
button {
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* 1. スライド塗りつぶし */
.btn-slide {
  background: transparent;
  color: #3e8685;
  border: 2px solid #3e8685;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.btn-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #3e8685;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: -1;
}
.btn-slide:hover { color: #fff; }
.btn-slide:hover::before { transform: translateX(0); }

/* 2. アウトライン → 塗りつぶし */
.btn-outline {
  background: transparent;
  color: #3e8685;
  border: 2px solid #3e8685;
}
.btn-outline:hover {
  background: #3e8685;
  color: #fff;
}

/* 3. 矢印スライドイン */
.btn-arrow {
  background: #3e8685;
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-arrow span {
  display: inline-block;
  transition: transform 0.25s;
}
.btn-arrow:hover span { transform: translateX(5px); }

/* 4. リップルエフェクト（CSSのみ） */
.btn-ripple {
  background: #3e8685;
  color: #fff;
  border: none;
  position: relative;
  overflow: hidden;
}
.btn-ripple::after {
  content: '';
  position: absolute;
  inset: 50%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s, opacity 0.5s;
  opacity: 0;
}
.btn-ripple:hover::after {
  inset: -50%;
  transform: scale(1);
  opacity: 1;
}

/* 5. フロート（浮き上がり） */
.btn-float {
  background: #3e8685;
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(62, 134, 133, 0.3);
}
.btn-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(62, 134, 133, 0.4);
}

方法②：1パターンずつ生成する

AIへのプロンプト例

ホバーすると背景色が左からスライドして変わるボタンをHTMLとCSSで作ってください。
ベース色は白・テキストとボーダーはティール（#3e8685）。
ホバー時は背景がティールでテキストが白になる。

ポイント

• まとめてパターンを依頼すると比較・選択がしやすくなります
• 「色・角丸・サイズを変えて」などカスタマイズもすぐに対応してくれます
• ボタンのデザインはサイトの雰囲気に合わせて選びましょう