ホバー時に動物に変化するボタン6選

カタカナから動物キャラクターに変身するボタンって、どうやって作るんですか？

いいね、ユニークなアイデアだね。実は、CSSの疑似要素とアニメーションを組み合わせれば、こういった遊び心のあるボタンが作れるんだ。

AIに頼めば、こういう複雑なデザインも作ってもらえるんですか？

もちろんだよ。ただし、プロンプトの書き方が重要なんだ。今回は6種類の動物ボタンを作るけど、全てに共通するプロンプトの構造を理解しておこう。

AIへのプロンプト作成のコツ

このレッスンで作成する6種類の動物ボタン（クマ、パンダ、ネコ、イヌ、ウサギ、コアラ）は、全て同じプロンプト構造で生成されています。複雑なアニメーションボタンでも、以下の構造化された指示で実現できます。

まずは1つのキャラクターだけを丁寧に作成し、その後で他の動物に応用していくと良いでしょう。

効果的なプロンプト構造（動物ボタン共通）

動物変身ボタンを正確に生成してもらうには、4段階の構造化された指示が効果的です。

1. 要素と全体の印象（動物の指定を含む）
2. 初期状態（カタカナ表示と見た目）
3. ホバー時の変化（背景・文字・動物パーツの出現）
4. クリック時の変化（任意）

変身の順序まで指定するんですね。

そう。複雑なアニメーションは、どの要素がいつ・どこに・どう現れるかを明確にすることが大切なんだ。

各段階で伝えるべき内容

1. 全体のコンセプトと動物の指定

動物に変身するボタンを作成するための全体的なコンセプトを明確にします。

動物の種類 「クマキャラクター」「パンダキャラクター」など
変身の方向性 「徐々に変身」「段階的に出現」
デザインの雰囲気 「シンプルで可愛らしい」「親しみやすい」

2. 初期状態（カタカナ表示）

動物に変身するボタンの初期状態を設定します。

文字の種類 「カタカナで動物名」
背景色 「グレーの背景」
文字色とサイズ 「白い太字の大きな文字」
ボタンの形状 「適度な角丸」

3. ホバー時の基本変化（ボタン全体）

ホバー時にボタン全体がどのように変化するかを指定します。

背景色の変化 「動物に合った色に変化」（茶色→クマ、オレンジ→ネコなど）
文字の消失 「カタカナが徐々に透明に」
ボタン形状の変化 「少し丸みを帯びる」

4. 動物パーツの出現順序と位置

パーツごとの出現順序と位置を詳細に指示します。

耳の出現 「ボタンの上部左右に耳が飛び出す」
顔のパーツ 「目、鼻、口が順番に現れる」
特徴的な要素 「パンダの目の周り」「イヌの舌」「ウサギの長い耳」
配置の詳細 「疑似要素::beforeと::afterで左右の耳」「絶対配置で中央に顔」

5. 細かいアニメーション調整

作成されたアニメーションをさらに洗練させるために、以下のポイントを考慮します。

transition-delayの指定 「耳→目→鼻→口の順で0.1s刻みの遅延」
transformの種類 「scale(0)から scale(1)で拡大出現」
動きの滑らかさ 「全体で0.6s ease」
hover後の状態維持 「opacityで要素の表示を制御」

パーツごとに出現タイミングをずらすから、段階的なアニメーションになるんですね。

その通り。transition-delayを使うことで、一つ一つのパーツが順番に現れる自然なアニメーションが実現できるんだ。

プロンプト例（クマボタンの場合）

button要素を使用して、カタカナの「クマ」からクマのキャラクターに変化する楽しいボタンを作成してください。

### 初期状態
- 灰色系の背景に白い太字の「クマ」
- 適度な角丸の四角い形
- フラットで落ち着いた印象（影は弱めまたは無し）

### ホバー時
- 背景がクマを連想する茶色系に変化
- 文字は目立たないように薄くなって消える
- 上部に左右の丸い耳がふわっと現れる
- 顔のパーツ（鼻の周り → 目 → 鼻 → 口）の順に、小さく生まれてふくらむように出現
- 全体の動きはなめらかで自然

### クリック時（任意）
- 少し押し込まれたようにわずかに縮む
- すぐに元の状態へ戻る自然な挙動

こうやって段階的に指示すれば、複雑なアニメーションも再現できるんですね！

そういうこと。それじゃあ、実際に6種類の動物ボタンを見ていこう。それぞれ同じ構造のプロンプトで作られているけど、動物ごとに特徴的なパーツが違うから、バリエーション豊かなボタンになっているよ。

作成した6種類の動物ボタン

今回はボタンホバー時に6種類の動物に変身するボタンを作成しました。それぞれ固有の特徴的なパーツを持ちながらも、基本構造は共通しています。

1. クマに変身するボタン

カタカナ「クマ」から徐々にクマキャラクターに変身するボタンです。疑似要素で作る丸い耳が上部に飛び出し、顔のパーツが順番に現れます。

HTML

<button class="pixel-btn bear-btn">
  <span class="btn-text">クマ</span>
  <div class="bear-face">
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="snout">
      <div class="nose"></div>
      <div class="mouth"></div>
    </div>
  </div>
</button>

CSS

.bear-btn {
  position: relative;
  padding: 10px;
  width: 200px;
  border: none;
  background: #999;
  cursor: pointer;
  transition: background 0.6s ease, border-radius 0.6s ease;
  font-family: 'Courier New', monospace;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bear-btn::before,
.bear-btn::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  background: #8B4513;
  border-radius: 50%;
  top: 0;
  opacity: 0;
  transition: all 0.6s ease;
}

.bear-btn::before {
  left: 15px;
}

.bear-btn::after {
  right: 15px;
}

.bear-btn:hover {
  background: #8B4513;
  border-radius: 20px;
}

.bear-btn:hover::before,
.bear-btn:hover::after {
  width: 28px;
  height: 28px;
  top: -14px;
  opacity: 1;
}

.btn-text {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  transition: all 0.6s ease;
  position: relative;
  z-index: 2;
}

.bear-btn:hover .btn-text {
  opacity: 0;
  transform: scale(0);
}

.bear-face {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.bear-btn:hover .bear-face {
  opacity: 1;
}

.snout {
  position: absolute;
  width: 45px;
  height: 32px;
  background: #D2691E;
  border-radius: 50% 50% 45% 45%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -25%) scale(0);
  transition: transform 0.6s ease 0.1s;
}

.bear-btn:hover .snout {
  transform: translate(-50%, -25%) scale(1);
}

.eye {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #000;
  border-radius: 50%;
  top: 32%;
  transform: scale(0);
  transition: transform 0.6s ease 0.2s;
}

.bear-btn:hover .eye {
  transform: scale(1);
}

.eye.left {
  left: 30%;
}

.eye.right {
  right: 30%;
  width: 7px;
  height: 4px;
}

.nose {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #000;
  border-radius: 50%;
  top: 7px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  transition: transform 0.6s ease 0.3s;
}

.bear-btn:hover .nose {
  transform: translateX(-50%) scale(1);
}

.mouth {
  position: absolute;
  width: 18px;
  height: 10px;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  border-radius: 0 0 9px 9px;
  top: 13px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  transition: transform 0.6s ease 0.4s;
}

.bear-btn:hover .mouth {
  transform: translateX(-50%) scale(1);
}

このボタンの特徴

疑似要素の活用 ::beforeと::afterで左右の耳を作成し、ボタン上部に配置
段階的な出現 耳→鼻エリア→目→鼻→口の順で時間差を付けて表示
transform: scale() 各パーツをscale(0)から scale(1)に拡大して出現させる
グレーから茶色へ 背景色が徐々に変化し、クマの色味を表現

コードのポイント

疑似要素で耳を作成:

CSS

.bear-btn::before,
.bear-btn::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    background: #8B4513; /* 茶色の耳 */
    border-radius: 50%; /* 丸い形状 */
    top: 0;
    opacity: 0;
    transition: all 0.6s ease;
}

.bear-btn::before {
    left: 15px; /* 左の耳 */
}

.bear-btn::after {
    right: 15px; /* 右の耳 */
}

.bear-btn:hover::before,
.bear-btn:hover::after {
    width: 28px;
    height: 28px;
    top: -14px; /* ボタン上部に飛び出す */
    opacity: 1;
}

::beforeと::after疑似要素で左右の耳を作成
初期状態はwidth: 0、height: 0で非表示
ホバー時にwidthとheightを28pxに拡大し、top: -14pxで上部に配置
border-radius: 50%で完全な円形の耳を表現

パーツごとの時間差出現:

CSS

.snout {
    transform: translate(-50%, -25%) scale(0); /* 初期状態は非表示 */
    transition: transform 0.6s ease 0.1s; /* 0.1s遅延 */
}

.eye {
    transform: scale(0);
    transition: transform 0.6s ease 0.2s; /* 0.2s遅延 */
}

.nose {
    transform: translateX(-50%) scale(0);
    transition: transform 0.6s ease 0.3s; /* 0.3s遅延 */
}

.mouth {
    transform: translateX(-50%) scale(0);
    transition: transform 0.6s ease 0.4s; /* 0.4s遅延 */
}

transition-delayを0.1s刻みで設定し、パーツごとに順番に表示
耳(0s) → 鼻エリア(0.1s) → 目(0.2s) → 鼻(0.3s) → 口(0.4s)の順序
scale(0)からscale(1)への変化で、拡大しながら出現する効果
すべてtransformプロパティで制御し、滑らかなアニメーションを実現

2. パンダに変身するボタン

カタカナ「パンダ」から徐々にパンダキャラクターに変身するボタンです。目の周りの黒い模様が特徴的で、白い背景に黒の耳が映えます。

HTML

<button class="pixel-btn panda-btn">
  <span class="btn-text">パンダ</span>
  <div class="panda-face">
    <div class="eye-patch left">
      <div class="eye"></div>
    </div>
    <div class="eye-patch right">
      <div class="eye"></div>
    </div>
    <div class="nose"></div>
    <div class="mouth"></div>
  </div>
</button>

CSS

.panda-btn {
  position: relative;
  padding: 10px;
  width: 200px;
  border: none;
  background: #999;
  cursor: pointer;
  transition: background 0.6s ease, border-radius 0.6s ease;
  font-family: 'Courier New', monospace;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panda-btn::before,
.panda-btn::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  background: #000;
  border-radius: 50%;
  top: 0;
  opacity: 0;
  transition: all 0.6s ease;
}

.panda-btn::before {
  left: 12px;
}

.panda-btn::after {
  right: 12px;
}

.panda-btn:hover {
  background: #F5F5F0;
  border-radius: 25px;
}

.panda-btn:hover::before,
.panda-btn:hover::after {
  width: 24px;
  height: 24px;
  top: -8px;
  opacity: 1;
}

.btn-text {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  transition: all 0.6s ease;
  position: relative;
  z-index: 2;
}

.panda-btn:hover .btn-text {
  opacity: 0;
  transform: scale(0);
}

.panda-face {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.panda-btn:hover .panda-face {
  opacity: 1;
}

.eye-patch {
  position: absolute;
  width: 22px;
  height: 22px;
  background: #000;
  border-radius: 50%;
  top: 28%;
  transform: scale(0);
  transition: transform 0.6s ease 0.2s;
}

.panda-btn:hover .eye-patch {
  transform: scale(1);
}

.eye-patch.left {
  left: 24%;
}

.eye-patch.right {
  right: 24%;
}

.eye {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #FFF;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nose {
  position: absolute;
  width: 10px;
  height: 8px;
  background: #000;
  border-radius: 50%;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease 0.3s;
}

.panda-btn:hover .nose {
  transform: translate(-50%, -50%) scale(1);
}

.mouth {
  position: absolute;
  width: 20px;
  height: 12px;
  top: 58%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  transition: transform 0.6s ease 0.4s;
}

.panda-btn:hover .mouth {
  transform: translateX(-50%) scale(1);
}

.mouth::before,
.mouth::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 6px;
  border-bottom: 2px solid #000;
}

.mouth::before {
  left: 0;
  border-right: 2px solid #000;
  border-radius: 0 0 8px 0;
}

.mouth::after {
  right: 0;
  border-left: 2px solid #000;
  border-radius: 0 0 0 8px;
}

このボタンの特徴

黒い目の周り パンダの特徴的な黒い斑点を目のパッチとして表現
白い背景 グレーから白(#F5F5F0)へ変化し、パンダの体色を再現
黒い耳 疑似要素で作る黒い耳がボタン上部に配置
入れ子構造 目のパッチの中に白い目を配置して立体感を演出

コードのポイント

目のパッチと目の入れ子構造:

CSS

.eye-patch {
    position: absolute;
    width: 22px;
    height: 22px;
    background: #000; /* 黒い斑点 */
    border-radius: 50%;
    top: 28%;
    transform: scale(0);
    transition: transform 0.6s ease 0.2s; /* 0.2s遅延 */
}

.eye-patch.left {
    left: 24%;
}

.eye-patch.right {
    right: 24%;
}

.eye {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #FFF; /* 白い目 */
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央配置 */
}

.eye-patchで黒い斑点を作成し、その中に.eyeで白い目を配置
transform: translate(-50%, -50%)で目を斑点の中央に正確に配置
目のパッチは左右それぞれ個別に配置し、パンダらしい表情を作成

口のVシェイプ表現:

CSS

.mouth::before,
.mouth::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 6px;
    border-bottom: 2px solid #000;
}

.mouth::before {
    left: 0;
    border-right: 2px solid #000;
    border-radius: 0 0 8px 0; /* 右下のみ角丸 */
}

.mouth::after {
    right: 0;
    border-left: 2px solid #000;
    border-radius: 0 0 0 8px; /* 左下のみ角丸 */
}

疑似要素で左右に分けた口を作成し、V字型を表現
border-bottomとborder-left/rightを組み合わせてL字型のパーツを2つ作成
border-radiusで下の角のみを丸くして、柔らかい印象に

3. ネコに変身するボタン

カタカナ「ネコ」から徐々にネコキャラクターに変身するボタンです。三角形の耳と緑色の縦長の目が特徴的なネコを表現しています。

HTML

<button class="pixel-btn cat-btn">
  <span class="btn-text">ネコ</span>
  <div class="cat-face">
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="nose"></div>
    <div class="mouth"></div>
  </div>
</button>

CSS

.cat-btn {
  position: relative;
  padding: 10px;
  width: 200px;
  border: none;
  background: #999;
  cursor: pointer;
  transition: background 0.6s ease, border-radius 0.6s ease;
  font-family: 'Courier New', monospace;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-btn::before,
.cat-btn::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 0 solid #FF8C00;
  top: 0;
  opacity: 0;
  transition: all 0.6s ease;
}

.cat-btn::before {
  left: 20px;
}

.cat-btn::after {
  right: 20px;
}

.cat-btn:hover {
  background: #FF8C00;
  border-radius: 20px;
}

.cat-btn:hover::before,
.cat-btn:hover::after {
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid #FF8C00;
  top: -20px;
  opacity: 1;
}

.btn-text {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  transition: all 0.6s ease;
  position: relative;
  z-index: 2;
}

.cat-btn:hover .btn-text {
  opacity: 0;
  transform: scale(0);
}

.cat-face {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.cat-btn:hover .cat-face {
  opacity: 1;
}

.eye {
  position: absolute;
  width: 6px;
  height: 10px;
  background: #32CD32;
  border-radius: 50%;
  top: 32%;
  transform: scale(0);
  transition: transform 0.6s ease 0.2s;
}

.cat-btn:hover .eye {
  transform: scale(1);
}

.eye.left {
  left: 30%;
}

.eye.right {
  right: 30%;
}

.nose {
  position: absolute;
  width: 8px;
  height: 6px;
  background: #FFC0CB;
  border-radius: 50% 50% 40% 40%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease 0.3s;
}

.cat-btn:hover .nose {
  transform: translate(-50%, -50%) scale(1);
}

.mouth {
  position: absolute;
  width: 20px;
  height: 12px;
  top: 55%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  transition: transform 0.6s ease 0.4s;
}

.cat-btn:hover .mouth {
  transform: translateX(-50%) scale(1);
}

.mouth::before,
.mouth::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 6px;
  border-bottom: 2px solid #000;
}

.mouth::before {
  left: 0;
  border-right: 2px solid #000;
  border-radius: 0 0 8px 0;
}

.mouth::after {
  right: 0;
  border-left: 2px solid #000;
  border-radius: 0 0 0 8px;
}

このボタンの特徴

三角形の耳 border-leftとborder-rightを使って三角形の耳を作成
緑色の縦長の目 ネコの特徴的な瞳孔を縦長の楕円形で表現
ピンク色の鼻 小さな楕円形で可愛らしいネコの鼻を再現
オレンジ色の背景 茶トラ猫をイメージした明るいオレンジ色

コードのポイント

border-triangleで三角形の耳:

CSS

.cat-btn::before,
.cat-btn::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    /* 三角形をborderで作成 */
    border-left: 0 solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 0 solid #FF8C00;
    top: 0;
    opacity: 0;
    transition: all 0.6s ease;
}

.cat-btn:hover::before,
.cat-btn:hover::after {
    /* ホバー時に三角形のサイズを拡大 */
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 20px solid #FF8C00;
    top: -20px; /* ボタン上部に配置 */
    opacity: 1;
}

width: 0、height: 0でボックスを消し、borderだけで三角形を作成
border-leftとborder-rightをtransparentにして、border-bottomだけ色を付ける
初期状態はborder-width: 0、ホバー時に適切なサイズに拡大して三角形を表示

縦長の楕円で目を表現:

CSS

.eye {
    position: absolute;
    width: 6px; /* 幅は狭く */
    height: 10px; /* 高さは長く */
    background: #32CD32; /* 緑色の目 */
    border-radius: 50%; /* 楕円形 */
    top: 32%;
    transform: scale(0);
    transition: transform 0.6s ease 0.2s;
}

.cat-btn:hover .eye {
    transform: scale(1);
}

width < heightで縦長の楕円を作成
border-radius: 50%で角を丸めて楕円形の目に
ネコの特徴的な縦に細い瞳孔を表現

4. イヌに変身するボタン

カタカナ「イヌ」から徐々にイヌキャラクターに変身するボタンです。垂れ下がった耳と、ホバー時に伸びる舌が特徴的です。

HTML

<button class="pixel-btn dog-btn">
  <span class="btn-text">イヌ</span>
  <div class="dog-face">
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="snout">
      <div class="nose"></div>
      <div class="tongue"></div>
    </div>
  </div>
</button>

CSS

.dog-btn {
  position: relative;
  padding: 10px;
  width: 200px;
  border: none;
  background: #999;
  cursor: pointer;
  transition: background 0.6s ease, border-radius 0.6s ease;
  font-family: 'Courier New', monospace;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dog-btn::before,
.dog-btn::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  background: #8B4513;
  border-radius: 0 0 50% 50%;
  top: 0;
  opacity: 0;
  transition: all 0.6s ease;
}

.dog-btn::before {
  left: 10px;
  transform-origin: top right;
}

.dog-btn::after {
  right: 10px;
  transform-origin: top left;
}

.dog-btn:hover {
  background: #D2691E;
  border-radius: 20px;
}

.dog-btn:hover::before {
  width: 18px;
  height: 30px;
  top: 5px;
  left: 5px;
  opacity: 1;
  transform: rotate(-10deg);
}

.dog-btn:hover::after {
  width: 18px;
  height: 30px;
  top: 5px;
  right: 5px;
  opacity: 1;
  transform: rotate(10deg);
}

.btn-text {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  transition: all 0.6s ease;
  position: relative;
  z-index: 2;
}

.dog-btn:hover .btn-text {
  opacity: 0;
  transform: scale(0);
}

.dog-face {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.dog-btn:hover .dog-face {
  opacity: 1;
}

.eye {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #000;
  border-radius: 50%;
  top: 30%;
  transform: scale(0);
  transition: transform 0.6s ease 0.2s;
}

.dog-btn:hover .eye {
  transform: scale(1);
}

.eye.left {
  left: 28%;
}

.eye.right {
  right: 28%;
}

.snout {
  position: absolute;
  width: 35px;
  height: 25px;
  background: #F5DEB3;
  border-radius: 50% 50% 40% 40%;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  transition: transform 0.6s ease 0.3s;
}

.dog-btn:hover .snout {
  transform: translateX(-50%) scale(1);
}

.nose {
  position: absolute;
  width: 10px;
  height: 8px;
  background: #000;
  border-radius: 50%;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
}

.tongue {
  position: absolute;
  width: 10px;
  height: 0;
  background: #FF69B4;
  border-radius: 0 0 50% 50%;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  transition: height 0.6s ease 0.5s;
}

.dog-btn:hover .tongue {
  height: 12px;
  bottom: -12px;
}

このボタンの特徴

垂れた耳 border-radiusで下半分を丸くして垂れ耳を表現
回転する耳 transform: rotate()で左右の耳を少し外側に傾ける
ピンク色の舌 ホバー時にheightが0から12pxに伸びて舌が出る
薄茶色の鼻エリア 楕円形の鼻エリアに目と鼻を配置

コードのポイント

回転する垂れ耳の作成:

CSS

.dog-btn::before,
.dog-btn::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    background: #8B4513; /* 茶色の耳 */
    border-radius: 0 0 50% 50%; /* 下半分のみ丸く */
    top: 0;
    opacity: 0;
    transition: all 0.6s ease;
}

.dog-btn::before {
    left: 10px;
    transform-origin: top right; /* 右上を軸に回転 */
}

.dog-btn::after {
    right: 10px;
    transform-origin: top left; /* 左上を軸に回転 */
}

.dog-btn:hover::before {
    width: 18px;
    height: 30px;
    top: 5px;
    left: 5px;
    opacity: 1;
    transform: rotate(-10deg); /* 左に10度傾ける */
}

.dog-btn:hover::after {
    width: 18px;
    height: 30px;
    top: 5px;
    right: 5px;
    opacity: 1;
    transform: rotate(10deg); /* 右に10度傾ける */
}

border-radius: 0 0 50% 50%で上は四角、下は丸い形状を作成
transform-originで回転の軸を設定（左耳は右上、右耳は左上）
transform: rotate()で左右それぞれ10度傾けて垂れ耳を表現

伸びる舌のアニメーション:

CSS

.tongue {
    position: absolute;
    width: 10px;
    height: 0; /* 初期状態は高さ0 */
    background: #FF69B4; /* ピンク色 */
    border-radius: 0 0 50% 50%; /* 下部を丸く */
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    transition: height 0.6s ease 0.5s; /* 0.5s遅延で最後に出現 */
}

.dog-btn:hover .tongue {
    height: 12px; /* ホバー時に高さ12pxに */
    bottom: -12px; /* 下に移動 */
}

初期状態はheight: 0で非表示
ホバー時にheightとbottomを同時に変化させて下に伸びる動き
transition-delay: 0.5sで他のパーツが出た後に舌が出る

5. ウサギに変身するボタン

カタカナ「ウサギ」から徐々にウサギキャラクターに変身するボタンです。長く伸びた耳と、左右に広がるヒゲが特徴的です。

HTML

<button class="pixel-btn rabbit-btn">
  <span class="btn-text">ウサギ</span>
  <div class="rabbit-face">
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="nose"></div>
    <div class="whiskers"></div>
  </div>
</button>

CSS

.rabbit-btn {
  position: relative;
  padding: 10px;
  width: 200px;
  border: none;
  background: #999;
  cursor: pointer;
  transition: background 0.6s ease, border-radius 0.6s ease;
  font-family: 'Courier New', monospace;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rabbit-btn::before,
.rabbit-btn::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  background: #FFB6C1;
  border-radius: 50% 50% 40% 40%;
  top: 0;
  opacity: 0;
  transition: all 0.6s ease;
}

.rabbit-btn::before {
  left: 18px;
}

.rabbit-btn::after {
  right: 18px;
}

.rabbit-btn:hover {
  background: #F5F5F0;
  border-radius: 20px;
}

.rabbit-btn:hover::before,
.rabbit-btn:hover::after {
  width: 16px;
  height: 40px;
  top: -30px;
  opacity: 1;
}

.btn-text {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  transition: all 0.6s ease;
  position: relative;
  z-index: 2;
}

.rabbit-btn:hover .btn-text {
  opacity: 0;
  transform: scale(0);
}

.rabbit-face {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.rabbit-btn:hover .rabbit-face {
  opacity: 1;
}

.eye {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #FF69B4;
  border-radius: 50%;
  top: 35%;
  transform: scale(0);
  transition: transform 0.6s ease 0.2s;
}

.rabbit-btn:hover .eye {
  transform: scale(1);
}

.eye.left {
  left: 28%;
}

.eye.right {
  right: 28%;
}

.nose {
  position: absolute;
  width: 10px;
  height: 8px;
  background: #FFB6C1;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease 0.3s;
}

.rabbit-btn:hover .nose {
  transform: translate(-50%, -50%) scale(1);
}

.whiskers {
  position: absolute;
  width: 100%;
  height: 2px;
  top: 52%;
}

.whiskers::before,
.whiskers::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  background: #999;
  top: 0;
  transition: width 0.6s ease 0.4s;
}

.whiskers::before {
  left: 20%;
}

.whiskers::after {
  right: 20%;
}

.rabbit-btn:hover .whiskers::before,
.rabbit-btn:hover .whiskers::after {
  width: 15px;
}

このボタンの特徴

縦長の耳 高さ40pxの縦長の楕円形で、ウサギの特徴的な長い耳を表現
ピンク色のアクセント 耳と目にピンク色を使用し、可愛らしさを強調
横に伸びるヒゲ 疑似要素で左右に線を引いてヒゲを表現
白い背景 グレーから白(#F5F5F0)へ変化し、ウサギの体色を再現

コードのポイント

縦長の耳の作成:

CSS

.rabbit-btn::before,
.rabbit-btn::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    background: #FFB6C1; /* ピンク色の耳 */
    border-radius: 50% 50% 40% 40%; /* 上部を丸く、下部を少し尖らせる */
    top: 0;
    opacity: 0;
    transition: all 0.6s ease;
}

.rabbit-btn:hover::before,
.rabbit-btn:hover::after {
    width: 16px; /* 幅は狭く */
    height: 40px; /* 高さは長く */
    top: -30px; /* ボタンより上に大きく飛び出す */
    opacity: 1;
}

width: 16px、height: 40pxで縦長の楕円形を作成
top: -30pxで耳を大きく上に飛び出させてウサギらしさを演出
border-radius: 50% 50% 40% 40%で上部を丸く、下部を少し尖らせた形状

ヒゲの横伸びアニメーション:

CSS

.whiskers {
    position: absolute;
    width: 0;
    height: 2px;
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
}

.whiskers::before,
.whiskers::after {
    content: '';
    position: absolute;
    width: 0; /* 初期状態は幅0 */
    height: 2px;
    background: #333;
    top: 0;
    transition: width 0.6s ease;
}

.whiskers::before {
    right: 100%; /* 左に伸びる */
}

.whiskers::after {
    left: 100%; /* 右に伸びる */
}

.rabbit-btn:hover .whiskers::before,
.rabbit-btn:hover .whiskers::after {
    width: 15px; /* ホバー時に幅15pxに */
}

.whiskers要素を中央に配置し、疑似要素で左右に線を伸ばす
right: 100%とleft: 100%で中央から外側に向かって伸びる
初期状態はwidth: 0、ホバー時にwidth: 15pxに拡大

6. コアラに変身するボタン

カタカナ「コアラ」から徐々にコアラキャラクターに変身するボタンです。大きな丸い鼻と丸い耳、鼻の両脇の白い点が特徴的です。

HTML

<button class="pixel-btn koala-btn">
  <span class="btn-text">コアラ</span>
  <div class="koala-face">
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="nose"></div>
  </div>
</button>

CSS

.koala-btn {
  position: relative;
  padding: 10px;
  width: 200px;
  border: none;
  background: #999;
  cursor: pointer;
  transition: background 0.6s ease, border-radius 0.6s ease;
  font-family: 'Courier New', monospace;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.koala-btn::before,
.koala-btn::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  background: #708090;
  border-radius: 50%;
  top: 0;
  opacity: 0;
  transition: all 0.6s ease;
}

.koala-btn::before {
  left: 5px;
}

.koala-btn::after {
  right: 5px;
}

.koala-btn:hover {
  background: #A9A9A9;
  border-radius: 12px;
}

.koala-btn:hover::before,
.koala-btn:hover::after {
  width: 30px;
  height: 30px;
  top: -8px;
  opacity: 1;
}

.btn-text {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  transition: all 0.6s ease;
  position: relative;
  z-index: 2;
}

.koala-btn:hover .btn-text {
  opacity: 0;
  transform: scale(0);
}

.koala-face {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.koala-btn:hover .koala-face {
  opacity: 1;
}

.eye {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #000;
  border-radius: 50%;
  top: 35%;
  transform: scale(0);
  transition: transform 0.6s ease 0.2s;
}

.koala-btn:hover .eye {
  transform: scale(1);
}

.eye.left {
  left: 32%;
}

.eye.right {
  right: 32%;
}

.nose {
  position: absolute;
  width: 20px;
  height: 16px;
  background: #2F4F4F;
  border-radius: 50% 50% 45% 45%;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease 0.3s;
}

.koala-btn:hover .nose {
  transform: translate(-50%, -50%) scale(1);
}

.nose::before,
.nose::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 8px;
  background: #000;
  border-radius: 2px;
  top: 100%;
  transform: translateY(-2px);
}

.nose::before {
  left: 6px;
}

.nose::after {
  right: 6px;
}

このボタンの特徴

大きな鼻 幅20pxの楕円形でコアラの特徴的な大きな鼻を表現
丸い耳 疑似要素で作る完全な円形の耳
グレーの体色 背景が#808080のグレーでコアラの毛色を再現
鼻の下の線 疑似要素で鼻の両脇に黒い線を配置

コードのポイント

大きな鼻と鼻の下の線:

CSS

.nose {
    position: absolute;
    width: 20px; /* 他の動物より大きめ */
    height: 16px;
    background: #2F4F4F; /* 濃いグレー */
    border-radius: 50% 50% 45% 45%; /* 上部を丸く、下部を少し尖らせる */
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s ease 0.3s;
}

.nose::before,
.nose::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 8px;
    background: #000; /* 黒い線 */
    border-radius: 2px;
    top: 100%; /* 鼻の下に配置 */
    transform: translateY(-2px);
}

.nose::before {
    left: 6px; /* 左の線 */
}

.nose::after {
    right: 6px; /* 右の線 */
}

鼻をwidth: 20pxと大きめに設定してコアラの特徴を強調
鼻の疑似要素で鼻の下に黒い線を2本配置
top: 100%で鼻要素の下端を基準に配置し、translateY(-2px)で少し上にずらす

完全な円形の耳:

CSS

.koala-btn::before,
.koala-btn::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    background: #696969; /* ミディアムグレー */
    border-radius: 50%; /* 完全な円形 */
    top: 0;
    opacity: 0;
    transition: all 0.6s ease;
}

.koala-btn:hover::before,
.koala-btn:hover::after {
    width: 26px;
    height: 26px; /* width = height で完全な円 */
    top: -8px;
    opacity: 1;
}

widthとheightを同じ値にして完全な円形の耳を作成
border-radius: 50%で角を完全に丸める
他の動物と比べて耳の位置をtop: -8pxと控えめに設定し、コアラらしい耳の配置に

まとめ

疑似要素やtransition-delayを使えば、こんなに複雑なアニメーションも作れるんですね！

そうだね。一見複雑に見えても、基本的な技術の組み合わせなんだ。疑似要素で耳を作り、絶対配置で顔のパーツを配置し、transition-delayで出現タイミングをずらす。この3つの技術が核になっているよ。

AIに指示するときも、この構造を意識してプロンプトを書けば、他の動物でも作れそうです！

その通り。今回学んだプロンプト構造は、他のキャラクターボタンにも応用できる。例えば「キツネ」なら三角の耳と細い目、「ブタ」なら丸い鼻と上向きの耳、というように、それぞれの動物の特徴的なパーツを明確に指示すれば良いんだ。

transition-delayの値を変えれば、出現の速さも調整できますね。

そうだよ。0.1s刻みだと滑らかで自然な動きになるけど、0.2s刻みにすれば1つずつはっきり出現する感じになる。プロジェクトの雰囲気に合わせて調整してみるといい。細かい調整は生成されたコードを直接編集する方が効率的だから、AIで大枠を作って、自分で微調整するのがおすすめだよ。

動物変身ボタンのポイント

4段階のプロンプト構造 要素宣言 → 初期状態 → ホバー時 → クリック時（任意）
疑似要素の活用 ::beforeと::afterで左右の耳を作成し、ボタン上部に配置
transition-delay パーツごとに0.1s刻みの遅延を設定し、段階的な出現を実現
transform: scale() scale(0)からscale(1)への変化で拡大しながら出現
動物の特徴を強調 三角の耳(ネコ)、長い耳(ウサギ)、大きな鼻(コアラ)など、それぞれの特徴的なパーツを明確に表現
色の選択 背景色と耳の色で各動物の体色を再現（茶色→クマ、オレンジ→ネコなど）
細部の調整 AIで大枠を作成後、transition-delayやサイズなどの数値は手動で微調整

次のレッスンでは、さらに複雑なインタラクションを持つボタンを作成していきます。

AIへのプロンプト作成のコツ

効果的なプロンプト構造（動物ボタン共通）

各段階で伝えるべき内容

1. 全体のコンセプトと動物の指定

2. 初期状態（カタカナ表示）

3. ホバー時の基本変化（ボタン全体）

4. 動物パーツの出現順序と位置

5. 細かいアニメーション調整

プロンプト例（クマボタンの場合）

作成した6種類の動物ボタン

1. クマに変身するボタン

このボタンの特徴

コードのポイント

疑似要素で耳を作成:

パーツごとの時間差出現:

2. パンダに変身するボタン

このボタンの特徴

コードのポイント

目のパッチと目の入れ子構造:

口のVシェイプ表現:

3. ネコに変身するボタン

このボタンの特徴

コードのポイント

border-triangleで三角形の耳:

縦長の楕円で目を表現:

4. イヌに変身するボタン

このボタンの特徴

コードのポイント

回転する垂れ耳の作成:

伸びる舌のアニメーション:

5. ウサギに変身するボタン

このボタンの特徴

コードのポイント

縦長の耳の作成:

ヒゲの横伸びアニメーション:

6. コアラに変身するボタン

このボタンの特徴

コードのポイント

大きな鼻と鼻の下の線:

完全な円形の耳:

まとめ

学習チェック