Q ホバーエフェクトとは何ですか？

A ホバーエフェクトは、マウスカーソルが要素の上に移動した際に発生する視覚的な変化やアニメーションのことです。通常、リンクやボタンなどの要素に対して、ユーザーのインタラクションを強調するために使用されます。

Q ホバーエフェクトを実装するために必要な基本的な CSS プロパティは何ですか？

ホバーエフェクトを実装するためによく使用される基本的な CSS プロパティには、background、color、opacity、transform、transition などがあります。これらのプロパティを使用して、要素の背景色、テキストカラー、透明度、サイズ、アニメーションなどを変更できます。

Q 要素のホバーエフェクトで画像が切り替わる方法

要素にマウスを重ねると画像が切り替わるホバーエフェクトの実装方法を詳しく解説します。

【コピペOK】CSSで実装するホバーエフェクト集12選

Q: Q ホバー エフェクトとは何ですか？

A ホバー エフェクトは、マウスカーソルが要素の上に移動した際に発生する視覚的な変化やアニメーションのことです。通常、リンクやボタンなどの要素に対して、ユーザーのインタラクションを強調するために使用されます。

Q: Q ホバー エフェクトを実装するために必要な基本的な CSS プロパティは何ですか？

ホバー エフェクトを実装するためによく使用される基本的な CSS プロパティには、background、color、opacity、transform、transition などがあります。これらのプロパティを使用して、要素の背景色、テキストカラー、透明度、サイズ、アニメーションなどを変更できます。

Q: Q 要素のホバー エフェクトで画像が切り替わる方法

要素にマウスを重ねると画像が切り替わるホバー エフェクトの実装方法を詳しく解説します。

※本ページはプロモーションが含まれています。

本記事は、「CSSでホバーエフェクトを実装したいけど0からコーディングするのは少し手間がかかるなあ…」と思いつつ

UIHACK 編集長

・ホバーエフェクトの事例とデモを実際にみたい人
・今ままで、少し違うデザインのアクセントを求めている人
・実装方法やサンプルコードも併せてみたい人

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、「前半」では「ホバーエフェクトの基本的な考え方」を「後半」では「テキスト」「画像」「ボタン」にホバーエフェクトをする方法をサンプルコードを交えて詳しく解説します。

プログラミング未経験の方でも、読みやすい内容なので、初心者の方でも少しずつ試してみて、楽しく学んでくださいね。

それでは、ご一読ください！

ホバーエフェクトとは？基本的な考え方とCSSでの実装方法を解説
テキストホバーエフェクトの実装方法とアイデア
ホバーアニメーションで画像にエフェクトを実装する方法を解説します
CTAボタンをホバーアニメーションで魅力的にするデザインテクニック
ホバーエフェクトでグラデーションでもっとお洒落に
ホバーエフェクトとは？の結論とまとめ

ホバーエフェクトとは？基本的な考え方とCSSでの実装方法を解説

ホバーエフェクトの基本的な考え方は、ユーザーが要素にカーソルを重ねたときに、要素のスタイルを変更することで、ユーザーに分かりやすく出来たりします。
例えば、ボタンにホバーエフェクトを適用する場合、ボタンの色や背景が変化し、クリックを促すヒント的な内容を提供します。

UIHACK 編集長

最初は、CSSを使用してホバーエフェクトを実装する方法は難しいと思うかもしれませんが、慣れてくると比較的シンプルに実装できます。

本記事では以下の内容をご紹介します。

紹介するホバーエフェクトの一覧

テキストホバーエフェクトの実装方法とアイデア
ホバーアニメーションで画像をもっと活かす方法
CTAボタンをホバーアニメーションで魅力的にするデザインテクニック
ホバーエフェクトをグラデーションでもっとお洒落にするテクニック

テキストホバーエフェクトの実装方法とアイデア

テキストホバーエフェクトは、ウェブデザインにおいてテキスト要素にアニメーションを実装します。

このテクニックを活用することで、ユーザーを飽きさせないようなページを提供することができます。ここでは、テキストホバーエフェクトを実装する基本的な手順と、クリエイティブなアイデアをいくつか紹介します。

色味の変化

UIHACK 編集長

テキストにホバーエフェクトを追加することで、ユーザーの「注目」を引きつけるデザインを実現できます。特に、ホバーエフェクトによってテキストの色味や背景が変化すると、テキストがより際立ちます。

【実行結果】色味の変化

Hover Me!

プチ解説

上記のサンプルコードは、テキストホバーエフェクトを実装するための基本的な手順を示しています。要素を選択し、ホバースタイルを定義し、:hover 疑似クラスを使用してエフェクトを発動させる方法を示しています。

また、オプションとしてトランジションを追加してアニメーションを滑らかにしています。

HTML

<div class="hover-text">
  Hover Me!
</div>

HTML

プチ解説

.hover-text というクラスが付けられた要素です。この要素がテキストホバーエフェクトが適用される要素です。
Hover Me! というテキストが表示されます。

CSS

.hover-text {
    display: inline-block;
    font-size: 24px;
    padding: 10px 20px;
    background-color: #3498db;
    color: #fff;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.hover-text:hover {
    background-color: #e74c3c;
    color: #fff;
}

CSS

プチ解説

transition: background-color 0.3s ease, color 0.3s ease;: 背景色とテキストの色の変化を0.3秒のトランジションで滑らかに行います。

.hover-text:hover:ホバーすると、背景色が「赤色」に変化し、テキストの色も「白色」に変更されます。

ラインと色でテキストを際立たせる

UIHACK 編集長

テキストを際立たせる効果的な方法の一つは、テキストの周りにラインを配置し、適切な色を使用することです。この方法によって、テキストが目立ちやすくなり、視覚的に引き立てられます。

【実行結果】ラインと色でテキストを際立たせる

テキストを際立たせる

プチ解説

このHTMLコードは、指定されたCSSスタイルを使用して、テキストの周りにラインを表示する効果を実現します。テキストをホバーすると、指定のラインが中央から伸びるような仕様です。

HTML

<p class="text-with-line">テキストを際立たせる</p>

HTML

プチ解説

.text-with-line というクラスが指定されており、このクラスは後述のCSSスタイルを適用するためのものです。

CSS

.text-with-line {
    position: relative;
    display: inline-block;
}

.text-with-line::before {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #3498db; /* ラインの色 */
    transition: transform 0.3s ease;
    transform: scaleX(0); /* 初期状態ではラインを非表示 */
}

.text-with-line:hover::before {
    transform: scaleX(1); /* ホバー時にラインを表示 */
}

CSS

プチ解説

.text-with-line::beforeは、要素の前に疑似要素を追加するための擬似要素選択子です。content プロパティで空のコンテンツを設定し、position: absolute; で絶対位置に配置されるようになります。bottom と left で位置を微調整し、width と height でラインのサイズを指定します。background-color でラインの色を設定します。

transition プロパティでトランジションを指定します。transform: scaleX(0); で初期状態ではラインを非表示にしています。

.text-with-line:hover::before は、ホバー時に適用されるスタイルを指定しています。transform: scaleX(1); によって、ホバー時にラインが横方向に伸びるエフェクトが発生します。

拡張させる

UIHACK 編集長

テキストを拡張させるエフェクトは、Webデザインにおいてテキストをより目立たせるための魅力的な方法です。このエフェクトを使用すると、テキストがユーザーの注意を引き、コンテンツを際立たせることができます。この記事では、CSSを使用してテキストを拡張させ、それを際立たせる方法について解説します。

【実行結果】色味の変化

テキストを拡張させる

プチ解説

上記のサンプルコードは、「テキスト」をホバーすると、フォントサイズが「20px」から「24px」に拡大されるエフェクトが実装できます。

HTML

<p class="expanding-text">テキストを拡張させる</p>

HTML

プチ解説

この要素にはexpanding-textというクラスが設定されています。

CSS

.expanding-text {
    font-size: 20px;
    transition: font-size 0.3s ease;
}

.expanding-text:hover {
    font-size: 24px;
}

CSS

プチ解説

transition: font-size 0.3s ease;：フォントサイズの変化を0.3秒のアニメーションで滑らかに行うように設定しています。

.expanding-text:hover：ホバー状態のときに適用されるスタイルを指定します。

ホバーアニメーションで画像にエフェクトを実装する方法を解説します

UIHACK 編集長

マウスカーソルを画像に重ねると、画像が変化するエフェクトは、多くの注目を引きつけることができます。以下では、CSSを使用して画像にホバーアニメーションを実装する手順を解説します。

画像がふわっと浮き上がる

画像の浮き上がるエフェクトは、コンテンツに立体感をもたらし、視覚的な興味を引きます。このエフェクトは、ユーザーがマウスカーソルを画像に合わせると、画像が軽やかに浮き上がるというものです。以下では、このエフェクトを実現するためのステップを解説します。

【実行結果】色味の変化

プチ解説

上記のサンプルコードは、マウスカーソルが画像に合わさると、画像がふわっと浮き上がるエフェクトが実現されます。

HTML

<div class="floating-image">
    <img src="image.jpg" alt="浮き上がる画像">
</div>

HTML

プチ解説

まず、浮き上がるエフェクトを適用する画像を含むHTML要素を作成します。例えば、以下のように
内に画像を配置します。

CSS

.floating-image {
    display: inline-block;
    transition: transform 0.3s ease;
}

.floating-image img {
    width: 100%;
}

.floating-image:hover {
    transform: translateY(-5px);
}

CSS

プチ解説

.floating-image:hover：ホバー時に適用されるスタイルを指定します。transformプロパティを使用して、画像を上に少し浮き上がるように移動させます。

画像の色が変化する

UIHACK 編集長

画像の色を変化させるエフェクトは、ウェブデザインにおいて視覚的な引きつけを生み出す手法の一つです。このエフェクトは、ユーザーがマウスカーソルを画像に合わせると、画像の色が滑らかに変化するというものです。以下では、このエフェクトを実現するためのステップを解説します。

【実行結果】色味の変化

プチ解説

上記の画像をホバーすると画像の色味を変化させる事ができます。

HTML

<div class="color-changing-image">
  <img src="https://ui-hack.com/wp-content/uploads/2023/08/css-line-height.jpg" alt="色が変化する画像">
</div>

HTML

プチ解説

HTML要素内に変化させたい画像を配置します。

CSS

.color-changing-image {
    display: inline-block;
    transition: filter 0.3s ease;
}

.color-changing-image img {
    width: 100%;
}

.color-changing-image:hover {
    filter: hue-rotate(90deg);
}

CSS

プチ解説

.color-changing-image:hover：ホバー時に適用されるスタイルを指定します。filterプロパティを使用して、hue-rotate関数を適用して画像の色相を変化させます。この例では90度回転させています。

画像をホバーするとテキストが表示

UIHACK 編集長

画像にマウスカーソルを重ねると、画像の不透明度が変化してエフェクトを実現させます。

【実行結果】色味の変化

画像をホバーするとテキストが表示

しっかり出来てますね(◎_◎)

プチ解説

image-containerは画像を包括するコンテナで、hover-textは画像に重なるテキストエリアです。マウスを画像上にホバーさせると、テキストエリアが表示されるように設定されています。

HTML

<div class="image-container">
  <img src="https://ui-hack.com/wp-content/uploads/2023/08/26949777_s.jpg" alt="画像の説明">
  <div class="hover-text">
    <div class="text1">画像をホバーするとテキストが表示</div>
    <div class="text2">しっかり出来てますね(◎_◎)</div>
  </div>
</div>

HTML

プチ解説

ホバーテキストは内側の
要素で、クラス名「hover-text」を持ち、「画像をホバーするとテキストが表示」と「しっかり出来てますね(◎_◎)」が含まれています。

CSS

/* styles.css */
.image-container {
  position: relative;
  width: 320px;
  height: 213px;
}

.image-container img {
  width: 100%;
  height: 100%;
}

.hover-text {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.65);
  opacity: 0;
  transition: 0.3s ease-in-out;
}

.hover-text .text1 {
  font-size: 22px;
  padding: 10px 20px;
}

.hover-text .text2 {
  font-size: 16px;
  padding: 0 20px;
}

.image-container:hover .hover-text {
  opacity: 1;
}

CSS

プチ解説

このCSSコードは、ホバーエフェクトを実現するためのスタイルを定義しています。画像コンテナのスタイル（幅や高さなど）や画像自体のスタイル（幅や高さ）が指定されています。

ホバーテキストのスタイルは、絶対位置配置（position: absolute;）でコンテナ全体に広がります。

テキストは白色で、背景色は半透明の黒色（rgba(0, 0, 0, 0.65)）に設定されています。初めは非表示（opacity: 0;）で、ホバー時にアニメーションで表示（opacity: 1;）されるように設定されています。

CTAボタンをホバーアニメーションで魅力的にするデザインテクニック

UIHACK 編集長

ウェブデザインにおいて、CTA（Call to Action）ボタンはユーザーの行動を促す重要な要素です。その効果を最大限に引き出すためには、ボタンに魅力的なホバーエフェクトを組み込むことが重要です。

以下では、簡単で効果的なホバーエフェクトを実装するためのCSSコードを提供します。

浮き上がるズレ効果

【実行結果】浮き上がるズレ効果

浮き上がるズレ効果

プチ解説

上記のサンプルコードは、CTAボタンに浮き上がるズレ効果を追加するためのスタイルを定義しています。

HTML

<div class="cta-button">浮き上がるズレ効果</div>

HTML

プチ解説

HTMLは解説不要ですかねΣ(,,ºΔº,,*)

CSS

.cta-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #ff9900;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

CSS

プチ解説

border-radius: 8px;: ボタンの角丸を設定します。ここでは8ピクセルの角丸が設定されています。

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);: ボタンに影を付けるボックスシャドウを設定します。ここでは、水平方向に0ピクセル、垂直方向に4ピクセル、ぼかしの量に6ピクセル、不透明度に0.1の影を指定しています。

transition: transform 0.2s ease, box-shadow 0.2s ease;: ホバーエフェクトのトランジション（遷移）を設定します。ボタンがホバーされた際に、transform（位置の変化）とbox-shadow（影の変化）が0.2秒かけて変化することが指定されています。

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

CSS

プチ解説

transform: translateY(-2px);: ホバー時に、ボタンが上方向に2ピクセルずれる（浮き上がる）エフェクトを設定します。

box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);: ホバー時に、ボタンの影の効果が強められます。影が水平方向に0ピクセル、垂直方向に6ピクセル、ぼかしの量に8ピクセル、不透明度に0.2の影が設定されています。

中央波紋エフェクトを実装する

【実行結果】中央波紋エフェクトを実装する

クリックして波紋を広げる

プチ解説

ボタンをクリックしている間は、、波紋エフェクトが中央からボタンが広がります。

HTML

  <section class="wra_but">
    <div class="ripple-button">クリックして波紋を広げる</div>
  </section>

HTML

プチ解説

<sectuion class=”wra_but”>で背景の色を変えてます。

CSS

/* セクションのスタイル */
.wra_but {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background-color: #f0f0f0;
}

/* 波紋エフェクトを持つボタンのスタイル */
.ripple-button {
  position: relative;
  overflow: hidden;
  background-color: #3498db;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

/* 波紋エフェクトを描画する疑似要素のスタイル */
.ripple-button::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, #ffffff 10%, transparent 10%) no-repeat 50%;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.4s, opacity 0.4s;
  pointer-events: none; /* 追加 */
}

/* ボタンがアクティブ（クリック）されたときの波紋エフェクトのスタイル */
.ripple-button:active::after {
  transform: scale(4);
  opacity: 0.5;
}

CSS

プチ解説

.ripple-button::after: ::after 疑似要素を使用して、ボタンをクリックした際に表示される波紋エフェクトのスタイルを定義しています。radial-gradient を使用して波紋の形状とカラーを指定しています。transform と opacity のアニメーションが設定され、ボタンクリック時に波紋が広がるアニメーションが行われます。

.ripple-button:active::after: ボタンがアクティブ（クリック）された際の波紋エフェクトのスタイルを指定しています。ボタンがクリックされると、波紋が広がります。

pointer-events: none; 波紋エフェクトを持つ疑似要素の上でのマウスイベントを無効にするために設定されています。この行がないと、波紋エフェクトの上でボタンのクリックが検出されてしまうため、正しく動作しない可能性があります。

中央波紋とぼわんーーとする効果

【実行結果】中央波紋とぼわんーーとする効果

プチ解説

上記のサンプルコードは、ボタンに波紋エフェクトとホバーエフェクト（ぼわんとする効果）を組み合わせて実現します。ボタンにマウスをホバーすると、ボタン自体がぼわんと拡大縮小し、クリックした際に中央から波紋が広がる効果が得られます。

HTML

<section class="wra_but">
  <button class="ripple-button">CSS中央波紋とぼわんーーとする効果</button>
</section>

HTML

プチ解説

このHTMLコードは、セクション内に波紋エフェクトとぼわんとするエフェクトを持つボタンを配置しています。

CSS

.wra_but {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.ripple-button {
  position: relative;
  overflow: hidden;
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  outline: none;
}

.ripple-button::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #ffffff 10%, transparent 10%) no-repeat 50%;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.4s, opacity 0.4s;
  pointer-events: none;
}

.ripple-button:hover::before {
  transform: scale(4);
  opacity: 0.3;
}

.ripple-button:hover {
  animation: hover-animation 1.5s ease-in-out infinite;
}

@keyframes hover-animation {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

CSS

プチ解説

.custom-button::before: ::before 疑似要素を使用して、ボタンをクリックした際に表示される波紋エフェクトのスタイルが定義されています。radial-gradient を使用して波紋の形状とカラーを指定し、transform と opacity のアニメーションが設定されています。

.custom-button:hover::before: ボタンがホバー（マウスを合わせる）されたときの波紋エフェクトのスタイルを指定しています。ボタンにマウスをホバーすると、波紋が広がります。

.custom-button:hover: ボタンがホバーされたときのぼわんとするエフェクトのアニメーションが設定されています。ホバー時にボタンが少し拡大縮小するアニメーションが実行されます。

@keyframes hover-animation: ホバーエフェクト（ぼわんとする）のアニメーションが定義されています。キーフレームアニメーションで、ボタンが拡大・縮小するアニメーションを設定しています。

ホバーエフェクトでグラデーションでもっとお洒落に

UIHACK 編集長

この章では、ボタンの背景に CSSプロバティのlinear-gradient を使用してグラデーションを適用し、ホバー時にボタンが少し変化されるように実装します。グラデーションのカラーを調整して、お好みのスタイリッシュな効果を作成してください。

ホバーで切り替わるグラデーション

【実行結果】ホバーで切り替わるグラデーション

プチ解説

このコードでは、ホバー時にボタンの背景色が青を基調としたグラデーションから緑を基調としたグラデーションに切り替わるように設定しています。ホバー時にも拡大縮小するエフェクトが引き続き適用され、またホバーエフェクトのアニメーションも維持されます。必要に応じてスタイルやカラーを調整して、望むデザインにご自身でカスタマイズしてください。

HTML

<section class="custom-wrapper">
  <button class="custom-cta-button">ホバー時にボタンの背景色が青から緑へ</button>
</section>

HTML

プチ解説

セクション内にカスタムボタンを配置しています。このボタンは、ホバーすると背景色が青から緑に切り替わるエフェクトを持っています。

CSS

/* styles.css */
.custom-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.custom-cta-button {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: #fff;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}

.custom-cta-button::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 10%, transparent 10%) no-repeat 50%;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.4s, opacity 0.4s;
  pointer-events: none;
}

.custom-cta-button:active::before {
  transform: scale(4);
  opacity: 0.3;
}

.custom-cta-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.custom-cta-button:hover {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  animation: hover-animation 1.5s ease-in-out infinite;
}

@keyframes hover-animation {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

CSS

プチ解説

.custom-cta-button::before: クリック時の波紋エフェクトを描画するための疑似要素のスタイルが定義されています。透明な波紋のグラデーションが背景に表示され、クリック時のアニメーションが設定されています。

.custom-cta-button:active: クリック時のボタンのアニメーションが定義されています。ボタンが少し上に移動し、影がつくエフェク

ホバーするとグラデーションが切り替わる + ネオンとぼかし効果

【実行結果】ホバーするとグラデーションが切り替わる + ネオンとぼかし効果変化

プチ解説

ボタンがホバーされた時のスタイルが指定されています。背景に疑似要素としてグラデーションが適用され、少し縮小され、ぼかしエフェクトが追加されます。

HTML

<section class="custom-wrapper">
  <button class="custom-cta-button">グラデーションが切り替わる + ネオンとぼかし効果</button>
</section>

HTML

プチ解説

このHTMLコードは、セクション内のCTAボタンを配置しています。

CSS

/* セクションのスタイル */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

/* CTAボタンのスタイル */
.cta-button {
  background: linear-gradient(135deg, #3498db, #2980b9); /* 青色のグラデーション */
  color: #fff;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}

/* CTAボタンのクリック時のスタイル */
.cta-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* CTAボタンのホバー時のスタイル */
.cta-button:hover {
  animation: hover-animation 1.5s ease-in-out infinite;
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100%);
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(1px);
}

/* CTAボタンのホバー時の疑似要素のスタイル */
.cta-button:hover::before {
  transform: rotate(-180deg);
}

/* CTAボタンの背面のスタイル */
.cta-button::after {
  content: "";
  z-index: -1;
  inset: 0;
}

/* ホバーエフェクトのアニメーション */
@keyframes hover-animation {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

CSS

プチ解説

.cta-button:active: ボタンがクリックされた時のスタイルが指定されています。ボタンが少し下に移動し、影がつくエフェクトが適用されます。

cta-button:hover: ボタンがホバーされた時のスタイルが指定されています。背景に疑似要素としてグラデーションが適用され、少し縮小され、ぼかしエフェクトが追加されます。

.cta-button:hover::before: ホバー時に疑似要素が回転するエフェクトが設定されています。

.cta-button::after: 背面のスタイルが指定されています。z-index を使用して背後に配置されています。

@keyframes hover-animation: ホバーエフェクトのアニメーションが定義されています。ボタンが拡大縮小するアニメーションが設定されています。

ホバーすると背景のグラデーションとテキストが切り替わる

UIHACK 編集長

ハック君(^ ^)質問ありがとう♪

【実行結果】ホバーすると背景のグラデーションとテキストが切り替わるの変化

プチ解説

ホバー時にテキストが切り替わるエフェクトを実現しています。
「デフォルト」→「切り替え後」にテキストが切り替わります

HTML

<section class="custom-wrapper">
  <button class="custom-cta-button">
    <span class="custom-default-text">デフォルト</span>
    <span class="custom-hover-text">切り替え後</span>
  </button>
</section>

HTML

CSS

/* custom-styles.css */

/* カスタムセクションのスタイル */
.custom-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

/* カスタムCTAボタンのスタイル */
.custom-cta-button {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: #fff;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
}

/* カスタムCTAボタンのテキスト切り替えスタイル */
.custom-cta-button span:nth-child(2) {
  display: none;
}

/* テキストトランジションのスタイル */
.custom-text-transition {
  display: block;
  transition: opacity 0.3s ease;
}

/* カスタムCTAボタンのホバー時のスタイル */
.custom-cta-button:hover {
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100%);
  transition: opacity 0.3s ease;
}

/* ホバー時にテキストがフェードアウト */
.custom-cta-button:hover .custom-text-transition {
  opacity: 0;
}

/* カスタムCTAボタンのホバーテキストスタイル */
.custom-cta-button .custom-hover-text {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* カスタムCTAボタンのホバー時にホバーテキストを表示 */
.custom-cta-button:hover .custom-hover-text {
  display: block;
  opacity: 1;
}

/* カスタムCTAボタンのクリック時のスタイル */
.custom-cta-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ホバーエフェクトのアニメーション */
@keyframes custom-hover-animation {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}