ボタンの左上がぺろっとめくれるアクションのCSS解説

今回紹介するのは、ボタンの左上が「ぺろっと」めくれるようなアクションを実現するCSSのテクニックです。このアニメーションを使うことで、インタラクティブで目を引くボタンデザインを作成することができます。

ボタン

1. CSSコードの全体構成

まず、今回のCSSコード全体は以下のようになっています。

.button {
  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: #dededede;
  box-shadow: 0.5em 0.5em 0.5em #0000004d;
}

.button::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.2em 0.2em 0.2em #0000004d;
  transition: width 0.3s, height 0.3s;
}

.button:hover::before {
  width: 1.6em;
  height: 1.6em;
}

.button:active {
  box-shadow: 0.2em 0.2em 0.3em #0000004d;
  transform: translate(0.1em, 0.1em);
}

2. 各プロパティの説明

`.button` クラス

.button {
  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: #dededede;
  box-shadow: 0.5em 0.5em 0.5em #0000004d;
}

position: relative;
ボタン自体の位置を基準にして、その中で疑似要素を絶対位置で配置するために使われます。
background-color: #bf0426;
ボタンの背景色を赤 (#bf0426) に設定しています。この色はボタン全体のデフォルトカラーです。
border: none;
ボタンの枠線を無くして、スッキリとしたデザインにしています。

`::before` 疑似要素

.button::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.2em 0.2em 0.2em #0000004d;
  transition: width 0.3s, height 0.3s;
}

position: absolute;
ボタンの左上を基準にして、疑似要素が絶対的に配置されます。
content: ”;
::before 疑似要素に必須のプロパティで、今回はビジュアル的な効果を出すために空のコンテンツを設定しています。
height: 0; width: 0;
初期状態では疑似要素の高さと幅を0にして、アニメーションの開始位置を設定します。
top: 0; left: 0;
ボタンの左上隅を基点として疑似要素を配置します。
background: linear-gradient(135deg, …);
線形グラデーションを使用して、めくれる部分の色の変化を表現します。グラデーションは、めくれる際の陰影効果を強調するためのもので、ボタンの色と周辺の色のコントラストを作り出しています。
border-radius: 0 0 0.5em 0;
左下隅の角を丸めて、めくれるようなエフェクトを強調します。
box-shadow: 0.2em 0.2em 0.2em #0000004d;
めくれる部分に影をつけて立体感を出しています。
transition: width 0.3s, height 0.3s;
width と height のプロパティに対するトランジションを設定し、ホバー時に滑らかに拡大するアニメーションを実現します。

ホバー時のアニメーション

.button:hover::before {
  width: 1.6em;
  height: 1.6em;
}

ボタンにホバーした際に ::before 疑似要素の width と height が拡大し、めくれるエフェクトが発生します。このエフェクトにより、疑似要素がボタンの左上部分を覆うように見えます。

クリック時のエフェクト

.button:active {
  box-shadow: 0.2em 0.2em 0.3em #0000004d;
  transform: translate(0.1em, 0.1em);
}

ボタンをクリックすると、影の深さが増し、ボタン全体がわずかに下に移動するようなエフェクトを追加しています。この効果により、ボタンが実際に押し込まれたような感覚を与えます。

3. 実装例

このCSSコードを使用してボタンを実装するために、以下のHTMLを使用します。

<button class="button">クリック</button>

4. まとめ

このテクニックを使えば、ユーザーインタラクションを楽しくするためのクリエイティブなボタンデザインを簡単に作成することができます。CSSの疑似要素やグラデーション、トランジションを活用することで、視覚的に魅力的なエフェクトを作り出すことができます。ぜひ、プロジェクトに取り入れてみてください！

お知らせ

私たちは、初台、幡ヶ谷、笹塚、代々木エリアでWebサイト制作やLP制作を行っています。これらの地域にお住まいの方や、事業を展開している企業・飲食店様・お店を持たれている方に向けて、Webサイト制作やホームページ制作、さらに企業向けのコーポレートサイト制作を提供しています。お問い合わせなどの目的に合わせたデザイン性の高いLP制作も承っております。

この地域に特化したサービスを提供することで、地域のビジネスがオンラインで成長できるようサポートしています。また、地域のお客様向けに特別なプランもご用意しておりますので、興味のある方はぜひお問い合わせください。

お問い合わせいただければ、詳細なご提案やお得なプランについて、丁寧にご案内いたします。初台、幡ヶ谷、笹塚、代々木エリアの皆様、お気軽にご相談ください。