技術

CSS Tips

ボタンの角がめくれるホバーエフェクト

疑似要素とlinear-gradientを組み合わせて、紙がめくれるような印象的なボタンアニメーションを作成しましょう。

コーディング css animation

はじめに

ボタンのホバーエフェクトは、ユーザーの注目を集め、インタラクションを楽しくする重要な要素です。

今回は、ホバー時にボタンの角が「ぺろっと」めくれるようなエフェクトをCSSだけで実装する方法を紹介します。このエフェクトは、紙やシールがめくれるような視覚効果を演出します。

完成デモ

ボタンにマウスを乗せてみてください。左上の角がめくれるようなアニメーションが発生します。

プレビュー
HTML
<button class="demo-peel-btn">クリック</button>
CSS
.demo-peel-btn {
  position: relative;
  font-size: 1.2em;
  padding: 0.7em 1.4em;
  background-color: #bf0426;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 0.5em;
  color: #fff;
  box-shadow: 0.3em 0.3em 0.5em rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.demo-peel-btn::before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: linear-gradient(
    135deg,
    #212121 0%,
    #212121 50%,
    #96041f 50%,
    #bf0426 60%
  );
  border-radius: 0 0 0.5em 0;
  box-shadow: 0.15em 0.15em 0.2em rgba(0, 0, 0, 0.3);
  transition: width 0.3s ease, height 0.3s ease;
}

.demo-peel-btn:hover::before {
  width: 1.6em;
  height: 1.6em;
}

.demo-peel-btn:active {
  box-shadow: 0.15em 0.15em 0.2em rgba(0, 0, 0, 0.3);
  transform: translate(0.1em, 0.1em);
}

仕組みの解説

このエフェクトは、疑似要素::beforeとlinear-gradientを組み合わせて実現しています。

ポイントは以下の3つです：

1. **疑似要素でめくれ部分を作成**
::beforeでボタンの左上に配置する「めくれ」部分を作成します。初期状態では幅と高さを0にして見えなくしています。

2. **グラデーションで折り目を表現**
linear-gradient(135deg, ...)で斜め45度のグラデーションを作り、暗い色（めくれた裏面）と明るい色（ボタンの表面に続く部分）の境界を表現します。

3. **transitionで滑らかにアニメーション**
ホバー時にwidthとheightを変更し、transitionで滑らかに「めくれ」が現れるようにしています。

HTMLコード

<button class="peel-btn">クリック</button>

CSSコード

.peel-btn {
  position: relative;
  font-size: 1.2em;
  padding: 0.7em 1.4em;
  background-color: #bf0426;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 0.5em;
  color: #fff;
  box-shadow: 0.3em 0.3em 0.5em rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.peel-btn::before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: linear-gradient(
    135deg,
    #212121 0%,
    #212121 50%,
    #96041f 50%,
    #bf0426 60%
  );
  border-radius: 0 0 0.5em 0;
  box-shadow: 0.15em 0.15em 0.2em rgba(0, 0, 0, 0.3);
  transition: width 0.3s ease, height 0.3s ease;
}

.peel-btn:hover::before {
  width: 1.6em;
  height: 1.6em;
}

.peel-btn:active {
  box-shadow: 0.15em 0.15em 0.2em rgba(0, 0, 0, 0.3);
  transform: translate(0.1em, 0.1em);
}

各プロパティの役割

position: relative

ボタンを基準点として設定し、疑似要素のposition: absoluteがボタン内で正しく配置されるようにします。

overflow: hidden

めくれ部分がボタンの境界をはみ出さないようにクリップします。角丸と組み合わせて使用します。

linear-gradient(135deg, ...)

135度（左上から右下）の方向にグラデーションを作成。50%地点で色を切り替えることで、めくれた裏面と表面の境界を表現します。

border-radius: 0 0 0.5em 0

右下の角だけを丸くして、めくれた部分の形状を自然に見せます。

width: 0; height: 0

初期状態で疑似要素を見えなくします。ホバー時に拡大してめくれが現れます。

transition

widthとheightの変化を滑らかにアニメーションさせます。easeで自然な動きになります。

グラデーションの詳細

めくれエフェクトの鍵となるのがlinear-gradientの設定です。

```css
background: linear-gradient(
135deg,
#212121 0%, /* めくれた裏面（暗い色） */
#212121 50%, /* 50%まで裏面 */
#96041f 50%, /* 50%から折り目（やや暗い赤） */
#bf0426 60% /* 60%からボタンの色に戻る */
);
```

- **#212121（0%〜50%）**: めくれた裏面を表す暗い色
- **#96041f（50%）**: 折り目部分、ボタン色より少し暗くして影を表現
- **#bf0426（60%〜）**: ボタンの元の色に戻る

135度の角度により、左上から右下への斜めのグラデーションが作られます。

カラーバリエーション

ボタンの色を変えるだけで、様々な雰囲気のめくれボタンを作成できます。

プレビュー
HTML
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
  <button class="demo-peel-btn demo-peel-btn--blue">Blue</button>
  <button class="demo-peel-btn demo-peel-btn--green">Green</button>
  <button class="demo-peel-btn demo-peel-btn--purple">Purple</button>
</div>
CSS
.demo-peel-btn {
  position: relative;
  font-size: 1.2em;
  padding: 0.7em 1.4em;
  background-color: #bf0426;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 0.5em;
  color: #fff;
  box-shadow: 0.3em 0.3em 0.5em rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.demo-peel-btn::before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: linear-gradient(
    135deg,
    #212121 0%,
    #212121 50%,
    #96041f 50%,
    #bf0426 60%
  );
  border-radius: 0 0 0.5em 0;
  box-shadow: 0.15em 0.15em 0.2em rgba(0, 0, 0, 0.3);
  transition: width 0.3s ease, height 0.3s ease;
}

.demo-peel-btn:hover::before {
  width: 1.6em;
  height: 1.6em;
}

.demo-peel-btn--blue {
  background-color: #2980b9;
}

.demo-peel-btn--blue::before {
  background: linear-gradient(
    135deg,
    #212121 0%,
    #212121 50%,
    #1a5276 50%,
    #2980b9 60%
  );
}

.demo-peel-btn--green {
  background-color: #27ae60;
}

.demo-peel-btn--green::before {
  background: linear-gradient(
    135deg,
    #212121 0%,
    #212121 50%,
    #1e8449 50%,
    #27ae60 60%
  );
}

.demo-peel-btn--purple {
  background-color: #8e44ad;
}

.demo-peel-btn--purple::before {
  background: linear-gradient(
    135deg,
    #212121 0%,
    #212121 50%,
    #6c3483 50%,
    #8e44ad 60%
  );
}

応用：右上からめくれるバージョン

プロパティを少し変更するだけで、右上からめくれるバージョンも作成できます。

プレビュー
HTML
<button class="demo-peel-btn demo-peel-btn--right">右上めくれ</button>
CSS
.demo-peel-btn {
  position: relative;
  font-size: 1.2em;
  padding: 0.7em 1.4em;
  background-color: #bf0426;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 0.5em;
  color: #fff;
  box-shadow: 0.3em 0.3em 0.5em rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.demo-peel-btn--right::before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  right: 0;
  left: auto;
  background: linear-gradient(
    225deg,
    #212121 0%,
    #212121 50%,
    #96041f 50%,
    #bf0426 60%
  );
  border-radius: 0 0 0 0.5em;
  box-shadow: -0.15em 0.15em 0.2em rgba(0, 0, 0, 0.3);
  transition: width 0.3s ease, height 0.3s ease;
}

.demo-peel-btn--right:hover::before {
  width: 1.6em;
  height: 1.6em;
}

応用のポイント

右上からめくれるバージョンを作るには、以下の変更が必要です：

**位置の変更**
`left: 0` → `right: 0; left: auto;`

**グラデーション角度の変更**
`135deg` → `225deg`（右上から左下への方向）

**角丸の変更**
`border-radius: 0 0 0.5em 0`（右下）→ `border-radius: 0 0 0 0.5em`（左下）

**影の方向の変更**
`box-shadow: 0.15em 0.15em ...` → `box-shadow: -0.15em 0.15em ...`

同様の考え方で、左下や右下からめくれるバージョンも作成できます。

応用：4隅すべてからめくれるボタン

::beforeと::afterを組み合わせれば、複数の角からめくれるボタンも可能です。

プレビュー
HTML
<button class="demo-peel-btn demo-peel-btn--corners">4隅めくれ</button>
CSS
.demo-peel-btn {
  position: relative;
  font-size: 1.2em;
  padding: 0.7em 1.4em;
  background-color: #bf0426;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 0.5em;
  color: #fff;
  box-shadow: 0.3em 0.3em 0.5em rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.demo-peel-btn--corners::before,
.demo-peel-btn--corners::after {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  box-shadow: 0.1em 0.1em 0.15em rgba(0, 0, 0, 0.3);
  transition: width 0.3s ease, height 0.3s ease;
}

.demo-peel-btn--corners::before {
  top: 0;
  left: 0;
  background: linear-gradient(
    135deg,
    #212121 0%,
    #212121 50%,
    #96041f 50%,
    #bf0426 60%
  );
  border-radius: 0 0 0.5em 0;
}

.demo-peel-btn--corners::after {
  bottom: 0;
  right: 0;
  background: linear-gradient(
    315deg,
    #212121 0%,
    #212121 50%,
    #96041f 50%,
    #bf0426 60%
  );
  border-radius: 0.5em 0 0 0;
}

.demo-peel-btn--corners:hover::before,
.demo-peel-btn--corners:hover::after {
  width: 1.2em;
  height: 1.2em;
}

まとめ

疑似要素とlinear-gradientを組み合わせることで、紙がめくれるような印象的なボタンホバーエフェクトを作成できます。

ポイントは、グラデーションで「裏面」と「折り目」を表現し、transitionで滑らかにアニメーションさせることです。

角度や位置を変えれば、様々な方向からめくれるバリエーションも作成可能です。JavaScriptを使わずCSSだけで実現できるため、パフォーマンスにも優れています。