UI HACK 
※本ページはプロモーションが含まれています。
本記事は、「CSSでホバーエフェクトを実装したいけど0からコーディングするのは少し手間がかかるなあ…」と思いつつ
・ホバーエフェクトの事例とデモを実際にみたい人
・今ままで、少し違うデザインのアクセントを求めている人
・実装方法やサンプルコードも併せてみたい人
上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。
この記事では、「前半」では「ホバーエフェクトの基本的な考え方」を「後半」では「テキスト」「画像」「ボタン」にホバーエフェクトをする方法をサンプルコードを交えて詳しく解説します。
プログラミング未経験の方でも、読みやすい内容なので、初心者の方でも少しずつ試してみて、楽しく学んでくださいね。
それでは、ご一読ください！
ホバーエフェクトの基本的な考え方は、ユーザーが要素にカーソルを重ねたときに、要素のスタイルを変更することで、ユーザーに分かりやすく出来たりします。
例えば、ボタンにホバーエフェクトを適用する場合、ボタンの色や背景が変化し、クリックを促すヒント的な内容を提供します。
最初は、CSSを使用してホバーエフェクトを実装する方法は難しいと思うかもしれませんが、慣れてくると比較的シンプルに実装できます。
本記事では以下の内容をご紹介します。
テキストホバーエフェクトは、ウェブデザインにおいてテキスト要素にアニメーションを実装します。
このテクニックを活用することで、ユーザーを飽きさせないようなページを提供することができます。ここでは、テキストホバーエフェクトを実装する基本的な手順と、クリエイティブなアイデアをいくつか紹介します。
色味の変化
テキストにホバーエフェクトを追加することで、ユーザーの「注目」を引きつけるデザインを実現できます。特に、ホバーエフェクトによってテキストの色味や背景が変化すると、テキストがより際立ちます。
上記のサンプルコードは、テキストホバーエフェクトを実装するための基本的な手順を示しています。要素を選択し、ホバースタイルを定義し、:hover 疑似クラスを使用してエフェクトを発動させる方法を示しています。
また、オプションとしてトランジションを追加してアニメーションを滑らかにしています。
HTML
<div class="hover-text">
Hover Me!
</div>.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;
}transition: background-color 0.3s ease, color 0.3s ease;: 背景色とテキストの色の変化を0.3秒のトランジションで滑らかに行います。
.hover-text:hover:ホバーすると、背景色が「赤色」に変化し、テキストの色も「白色」に変更されます。
ラインと色でテキストを際立たせる
テキストを際立たせる効果的な方法の一つは、テキストの周りにラインを配置し、適切な色を使用することです。この方法によって、テキストが目立ちやすくなり、視覚的に引き立てられます。
テキストを際立たせる
このHTMLコードは、指定されたCSSスタイルを使用して、テキストの周りにラインを表示する効果を実現します。テキストをホバーすると、指定のラインが中央から伸びるような仕様です。
HTML
<p class="text-with-line">テキストを際立たせる</p>.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); /* ホバー時にラインを表示 */
}.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); によって、ホバー時にラインが横方向に伸びるエフェクトが発生します。
拡張させる
テキストを拡張させるエフェクトは、Webデザインにおいてテキストをより目立たせるための魅力的な方法です。このエフェクトを使用すると、テキストがユーザーの注意を引き、コンテンツを際立たせることができます。この記事では、CSSを使用してテキストを拡張させ、それを際立たせる方法について解説します。
上記のサンプルコードは、「テキスト」をホバーすると、フォントサイズが「20px」から「24px」に拡大されるエフェクトが実装できます。
HTML
<p class="expanding-text">テキストを拡張させる</p>この要素にはexpanding-textというクラスが設定されています。
CSS
.expanding-text {
font-size: 20px;
transition: font-size 0.3s ease;
}
.expanding-text:hover {
font-size: 24px;
}transition: font-size 0.3s ease;：フォントサイズの変化を0.3秒のアニメーションで滑らかに行うように設定しています。
.expanding-text:hover：ホバー状態のときに適用されるスタイルを指定します。
マウスカーソルを画像に重ねると、画像が変化するエフェクトは、多くの注目を引きつけることができます。以下では、CSSを使用して画像にホバーアニメーションを実装する手順を解説します。
画像がふわっと浮き上がる
画像の浮き上がるエフェクトは、コンテンツに立体感をもたらし、視覚的な興味を引きます。このエフェクトは、ユーザーがマウスカーソルを画像に合わせると、画像が軽やかに浮き上がるというものです。以下では、このエフェクトを実現するためのステップを解説します。
上記のサンプルコードは、マウスカーソルが画像に合わさると、画像がふわっと浮き上がるエフェクトが実現されます。
HTML
<div class="floating-image">
<img src="image.jpg" alt="浮き上がる画像">
</div>まず、浮き上がるエフェクトを適用する画像を含むHTML要素を作成します。例えば、以下のように
内に画像を配置します。
CSS
.floating-image {
display: inline-block;
transition: transform 0.3s ease;
}
.floating-image img {
width: 100%;
}
.floating-image:hover {
transform: translateY(-5px);
}.floating-image:hover：ホバー時に適用されるスタイルを指定します。transformプロパティを使用して、画像を上に少し浮き上がるように移動させます。
画像の色が変化する
画像の色を変化させるエフェクトは、ウェブデザインにおいて視覚的な引きつけを生み出す手法の一つです。このエフェクトは、ユーザーがマウスカーソルを画像に合わせると、画像の色が滑らかに変化するというものです。以下では、このエフェクトを実現するためのステップを解説します。
上記の画像をホバーすると画像の色味を変化させる事ができます。
HTML
<div class="color-changing-image">
<img src="https://ui-hack.com/wp-content/uploads/2023/08/css-line-height.jpg" alt="色が変化する画像">
</div>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);
}.color-changing-image:hover：ホバー時に適用されるスタイルを指定します。filterプロパティを使用して、hue-rotate関数を適用して画像の色相を変化させます。この例では90度回転させています。
画像をホバーするとテキストが表示
画像にマウスカーソルを重ねると、画像の不透明度が変化してエフェクトを実現させます。
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>ホバーテキストは内側の
要素で、クラス名「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コードは、ホバーエフェクトを実現するためのスタイルを定義しています。画像コンテナのスタイル（幅や高さなど）や画像自体のスタイル（幅や高さ）が指定されています。
ホバーテキストのスタイルは、絶対位置配置（position: absolute;）でコンテナ全体に広がります。
テキストは白色で、背景色は半透明の黒色（rgba(0, 0, 0, 0.65)）に設定されています。初めは非表示（opacity: 0;）で、ホバー時にアニメーションで表示（opacity: 1;）されるように設定されています。
ウェブデザインにおいて、CTA（Call to Action）ボタンはユーザーの行動を促す重要な要素です。その効果を最大限に引き出すためには、ボタンに魅力的なホバーエフェクトを組み込むことが重要です。
以下では、簡単で効果的なホバーエフェクトを実装するためのCSSコードを提供します。
浮き上がるズレ効果
上記のサンプルコードは、CTAボタンに浮き上がるズレ効果を追加するためのスタイルを定義しています。
HTML
<div class="cta-button">浮き上がるズレ効果</div>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;
}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);
}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><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;
}.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コードは、セクション内に波紋エフェクトとぼわんとするエフェクトを持つボタンを配置しています。
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);
}
}.custom-button::before: ::before 疑似要素を使用して、ボタンをクリックした際に表示される波紋エフェクトのスタイルが定義されています。radial-gradient を使用して波紋の形状とカラーを指定し、transform と opacity のアニメーションが設定されています。
.custom-button:hover::before: ボタンがホバー（マウスを合わせる）されたときの波紋エフェクトのスタイルを指定しています。ボタンにマウスをホバーすると、波紋が広がります。
.custom-button:hover: ボタンがホバーされたときのぼわんとするエフェクトのアニメーションが設定されています。ホバー時にボタンが少し拡大縮小するアニメーションが実行されます。
@keyframes hover-animation: ホバーエフェクト（ぼわんとする）のアニメーションが定義されています。キーフレームアニメーションで、ボタンが拡大・縮小するアニメーションを設定しています。
この章では、ボタンの背景に CSSプロバティのlinear-gradient を使用してグラデーションを適用し、ホバー時にボタンが少し変化されるように実装します。グラデーションのカラーを調整して、お好みのスタイリッシュな効果を作成してください。
ホバーで切り替わるグラデーション
このコードでは、ホバー時にボタンの背景色が青を基調としたグラデーションから緑を基調としたグラデーションに切り替わるように設定しています。ホバー時にも拡大縮小するエフェクトが引き続き適用され、またホバーエフェクトのアニメーションも維持されます。必要に応じてスタイルやカラーを調整して、望むデザインにご自身でカスタマイズしてください。
HTML
<section class="custom-wrapper">
<button class="custom-cta-button">ホバー時にボタンの背景色が青から緑へ</button>
</section>セクション内にカスタムボタンを配置しています。このボタンは、ホバーすると背景色が青から緑に切り替わるエフェクトを持っています。
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);
}
}.custom-cta-button::before: クリック時の波紋エフェクトを描画するための疑似要素のスタイルが定義されています。透明な波紋のグラデーションが背景に表示され、クリック時のアニメーションが設定されています。
.custom-cta-button:active: クリック時のボタンのアニメーションが定義されています。ボタンが少し上に移動し、影がつくエフェク
ホバーするとグラデーションが切り替わる + ネオンとぼかし効果
ボタンがホバーされた時のスタイルが指定されています。背景に疑似要素としてグラデーションが適用され、少し縮小され、ぼかしエフェクトが追加されます。
HTML
<section class="custom-wrapper">
<button class="custom-cta-button">グラデーションが切り替わる + ネオンとぼかし効果</button>
</section>この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);
}
}.cta-button:active: ボタンがクリックされた時のスタイルが指定されています。ボタンが少し下に移動し、影がつくエフェクトが適用されます。
cta-button:hover: ボタンがホバーされた時のスタイルが指定されています。背景に疑似要素としてグラデーションが適用され、少し縮小され、ぼかしエフェクトが追加されます。
.cta-button:hover::before: ホバー時に疑似要素が回転するエフェクトが設定されています。
.cta-button::after: 背面のスタイルが指定されています。z-index を使用して背後に配置されています。
@keyframes hover-animation: ホバーエフェクトのアニメーションが定義されています。ボタンが拡大縮小するアニメーションが設定されています。
ホバーすると背景のグラデーションとテキストが切り替わる
ハック君(^ ^)質問ありがとう♪
ホバー時にテキストが切り替わるエフェクトを実現しています。
「デフォルト」→「切り替え後」にテキストが切り替わります
HTML
<section class="custom-wrapper">
<button class="custom-cta-button">
<span class="custom-default-text">デフォルト</span>
<span class="custom-hover-text">切り替え後</span>
</button>
</section>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);
}
}
.custom-cta-button: カスタムCTAボタンのスタイルを指定します。青色のグラデーションや角丸にするborder-radiusなどが設定されています。
.custom-cta-button span:nth-child(2) : テキスト切り替え時に2番目のテキスト（ホバーテキスト）を非表示にします。
.custom-text-transition: テキストがフェードアウトするアニメーションのスタイルを定義します。
.custom-cta-button:hover: ボタンがホバーされた際のスタイルを指定します。背景のグラデーションやアニメーションのトランジションが含まれています。
@keyframes custom-hover-animation : ホバーエフェクトのアニメーションキーフレームを定義します。ボタンが拡大縮小するアニメーションが含まれています。
【4年連続、売上第1位！】
【全国の書店員がオススメする本(2019年度 CPU大賞)第1位!】
ポチップ
今回は、ホバーエフェクトとは？基本的な考え方とCSSでの実装方法を解説についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。
- ホバーエフェクトとは？基本的な考え方とCSSでの実装方法を解説
- テキストホバーエフェクトの実装方法とアイデア
- ホバーアニメーションで画像にエフェクトを実装する方法を解説します
- CTAボタンをホバーアニメーションで魅力的にするデザインテクニック
- ホバーエフェクトでグラデーションでもっとお洒落に
もう一度、最初から「ホバーエフェクトとは？基本的な考え方とCSSでの実装方法を解説」を読む↑
Twitterも見てみる？
