[初心者シリーズ]ホバーで変わるボタンの作り方

<a href="#" class="color-btn">色が変わる</a>

.color-btn {
  background-color: #0078ff;
  color: #fff;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;

  /* ▼ transition（トランジション）
     背景色が変わるときのスピードや動きを指定します。
     書き方：transition: プロパティ名 変化時間 イージング;
       - background-color：色の変化だけにアニメーションを適用
       - 0.25s：0.25秒かけて変化（数値を大きくするとゆっくり）
       - ease：自然な加速と減速をつけて“ふわっ”とした動きに
     例：
       ・もっとゆっくり変えたい → 0.25s → 0.8s に変更
       ・キビキビ動かしたい → ease → linear に変更
  */
  transition: background-color 0.25s ease;
}

/* ▼ マウスを乗せたとき
   背景色が自然に切り替わります。
   「transition」により、パッと変わるのではなく“ふんわり”と色が変化します。
*/
.color-btn:hover {
  background-color: #ff6b6b; /* ← 色を変える場所。好みのカラーコードに変更可能 */
}

<a href="#" class="shadow-btn">影が増える</a>

.shadow-btn {
  background-color: #4caf50;
  color: #fff;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;

  /* ▼ 通常状態の影
     box-shadow: 横のずれ 縦のずれ ぼかし具合 色;
     数値を大きくすると影が広がり、小さくすると引き締まります。
     rgba(0,0,0,0.2) の「0.2」は透明度（0～1）で、影の濃さを調整できます。
  */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

  /* ▼ transition（トランジション）
     プロパティが変化するときのスピードや動きを設定します。
     box-shadow だけにアニメーションを適用。
     「0.25s」は変化時間、「ease」は自然な加速と減速。
     例：
       - ゆっくりにしたい → 0.5s や 1s に変更
       - 一定速度で動かしたい → ease → linear に変更
  */
  transition: box-shadow 0.25s ease;
}

/* ▼ ホバー時の影（マウスを乗せたとき）
   影を大きく・濃くして、ふんわり浮いたような印象に。
   数値を変えると、浮き上がり具合を調整できます。
*/
.shadow-btn:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

<a href="#" class="scale-btn">拡大する</a>

.scale-btn {
  background-color: #ff9800;
  color: #fff;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;

  /* ▼ transition（トランジション）
     transform（変形）プロパティに対して、変化のスピードや動きを指定。
     書き方：transition: 対象プロパティ 時間 イージング;
       - transform：拡大・回転・移動などのアニメーション対象
       - 0.25s：0.25秒で動作（数値を増やすとゆっくり）
       - ease：自然に始まり自然に終わる動き
     例：
       ・もっとゆっくり大きくしたい → 0.25s → 0.8s に変更
       ・カクッと拡大したい → ease → linear に変更
  */
  transition: transform 0.25s ease;
}

/* ▼ マウスを乗せたとき
   ボタンを少し大きくして、押せる雰囲気を演出します。
   scale(1.5)：元のサイズの1.5倍に拡大
     - 1.0 → 等倍（変化なし）
     - 1.2 → 少し大きく
     - 1.5 → はっきりと大きく
   数値を変えて、ちょうどいい感覚を探してみましょう。
*/
.scale-btn:hover {
  transform: scale(1.5);
}

<a href="#" class="combo-btn">全部入りボタン</a>

.combo-btn {
  background-color: #673ab7;
  color: #fff;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  transition: 
    background-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.combo-btn:hover {
  background-color: #e91e63;
  transform: scale(1.5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}