css カーソルが乗った時

CSS カーソルが乗った時にボタンの色を変える方法

概要

この文章では、CSSを使用してカーソルがボタンに乗った時の色を変更する方法について説明します。具体的なコード例や、実際にどのように効果が現れるのかを紹介します。

カーソル効果の基本

カーソルがボタンにかかった際の基本的なスタイル変更は、:hover 擬似クラスを使用して行います。このテクニックを利用することで、ユーザーインターフェースの親しみやすさを向上させることができます。具体的には、色の変更やサイズの変更などが可能です。

実装例

実際のコード例を示し、どのようにCSSを記述するかを詳しく解説しています。特に、色の変更を実現するための具体的なプロパティについて触れ、実装の手順を簡単に説明しています。

コード例


            <style>
                .button {
                    background-color: #4CAF50; /* 初期の背景色 */
                    border: none;
                    color: white;
                    padding: 15px 32px;
                    text-align: center;
                    text-decoration: none;
                    display: inline-block;
                    font-size: 16px;
                    margin: 4px 2px;
                    cursor: pointer;
                    transition: background-color 0.3s; /* 変化の遷移 */
                }

                .button:hover {
                    background-color: #45a049; /* ホバー時の背景色 */
                }
            </style>

            <a href="#" class="button">ボタン</a>

効果の表

状態	背景色
通常	#4CAF50
ホバー	#45a049

CSSで表現する、マウスホバー時の楽しい動き

Webサイトに動きを加えることで、ユーザーの目を引き、操作を楽しくすることができます。
特に、マウスホバー時の効果的なアニメーションは、ユーザーエクスペリエンス向上に大きく貢献します。

この記事では、CSSのtransitionプロパティとanimationプロパティを使って、マウスホバー時に様々な動きを表現する方法を、サンプルコードとともに解説します。

1. ふわっとする：柔和なトランジション

まずは、マウスホバー時の変化を滑らかに表現する方法を見ていきましょう。
例えば、リンクにマウスホバーした際に、色が変わったり、下線が消えたりする効果はよく見かけますが、この変化を瞬時に切り替えるのではなく、 「ふわっ」と滑らかに変化させる ことで、より洗練された印象を与えることができます。

CSSのtransitionプロパティは、要素のスタイルの変化をスムーズに表現するためのプロパティです。
このプロパティを使うことで、色の変化、サイズの変化、位置の変化などを、指定した時間をかけて滑らかに変化させることができます。

transitionプロパティの基本的な使い方

transitionプロパティは、以下の4つの値を指定することができます。

property: 変化させるプロパティ名 (例: color、background-color、transformなど)

duration: 変化にかける時間 (例: 0.3s、1sなど)

timing-function: 変化の速度 (例: ease、linear、ease-in-outなど)

delay: 変化が始まるまでの遅延時間 (例: 0s、0.5sなど)

これらの値は、スペース区切りで指定します。

例えば、リンクの色を0.3秒かけて滑らかに変化させるには、以下のように記述します。

a {
  transition: color 0.3s ease; 
}

a:hover {
  color: #dc6688;
}

下線の滑らかな消失

下線を滑らかに消失させるには、text-decoration-colorプロパティを使って、ホバー時に下線の色を透明にします。

a {
  transition: color 0.3s ease, text-decoration-color 0.3s ease; 
}

a:hover {
  color: #dc6688;
  text-decoration-color: transparent;
}

画像ボタンへの適用

画像ボタンにもtransitionプロパティを適用することができます。
例えば、ホバー時に画像の不透明度を0にすることで、フェードアウト効果を実現できます。

.image-button {
  transition: opacity 0.3s ease; 
}

.image-button:hover {
  opacity: 0;
}

2. ふわっとカチッする：複合的なトランジション

複数のCSSプロパティにtransitionプロパティを適用することで、より複雑なアニメーション効果を作成することができます。

複数のプロパティを変化させる

例えば、ボタンにホバーした際に、背景色、文字色、影、位置を変化させるには、以下のように記述します。

.button {
  background-color: #86c0de;
  color: ghostwhite;
  box-shadow: 0 6px 0 hsl(200deg 37% 50%), 0 12px 0 rgba(0,0,0,.2);
  transform: translateY(0);
  transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.button:hover {
  background-color: hsl(200deg 62% 75%);
  color: white;
  box-shadow: 0 3px 0 hsl(200deg 47% 60%), 0 6px 0 rgba(0,0,0,.2);
  transform: translateY(3px);
}

速度の調整

transition-durationプロパティを使うことで、各プロパティの変化速度を個別に調整することができます。
また、:active擬似クラスを使うことで、ボタンを押下した際のアニメーション速度を変えることも可能です。

.button:active {
  transition-duration: 0.1s; /* ボタンを押下した際は0.1秒で変化 */
}

3. ぽよんっとする：弾むようなアニメーション

より複雑なアニメーション、例えばボタンを「ぽよんっ」と弾ませるような効果は、transitionプロパティだけでは実現できません。
このような複雑なアニメーションには、animationプロパティと@keyframesルールを使用します。

animationプロパティ

animationプロパティでは、アニメーションの名前、継続時間、タイミング関数、遅延時間、繰り返し回数、方向、再生状態、充填モードなどを指定することができます。

.button:hover {
  animation: poyo 0.6s ease; /* poyoという名前のアニメーションを0.6秒かけて再生 */
}

@keyframesルール

@keyframesルールでは、アニメーションの各時点における要素のスタイルを定義します。
0% (開始時) から 100% (終了時) までの間を、パーセントで区切ってスタイルを指定していきます。

@keyframes poyo {
  0%, 100% { transform: scale(1); } /* 開始時と終了時は元のサイズ */
  10% { transform: scale(1.2); } /* 10%の時点で1.2倍に拡大 */
  40% { transform: scale(0.9); } /* 40%の時点で0.9倍に縮小 */
  60% { transform: scale(1.04); } /* 60%の時点で1.04倍に拡大 */
  80% { transform: scale(0.98); } /* 80%の時点で0.98倍に縮小 */
}

アニメーションの中断を防ぐ

animationプロパティで指定したアニメーションは、マウスホバーが解除されると途中で中断されてしまいます。
アニメーションが完了するまで再生させたい場合は、JavaScriptを使って制御する必要があります。

document.addEventListener('DOMContentLoaded', () => {
  const button = document.querySelector('.button');
  button.addEventListener('mouseenter', () => {
    button.classList.add('is-hovered');
  });
  button.addEventListener('mouseleave', () => {
    button.classList.remove('is-hovered');
  });
  button.addEventListener('animationend', () => {
    button.classList.remove('is-hovered');
  });
});

.button.is-hovered {
  animation: poyo 0.6s ease;
}

上記のコードでは、マウスホバー時にis-hoveredクラスを追加し、アニメーションが完了するか、マウスホバーが解除されるとis-hoveredクラスを削除します。
これにより、アニメーションが途中で中断されるのを防ぐことができます。

4. @keyframes規則：アニメーションの設計図

@keyframesルールは、アニメーションの設計図のようなものです。
0%から100%までの間をパーセントで区切り、各時点での要素のスタイルを指定することで、アニメーションの流れを定義します。

@keyframesの基本的な構文

@keyframes animation-name {
  0% { /* 開始時のスタイル */ }
  50% { /* 中間のスタイル */ }
  100% { /* 終了時のスタイル */ }
}

from と to

0% は from、100% は to というキーワードで置き換えることもできます。

@keyframes animation-name {
  from { /* 開始時のスタイル */ }
  to { /* 終了時のスタイル */ }
}

途中の状態を指定

0% と 100% 以外にも、任意のパーセントで途中の状態を指定することができます。

@keyframes animation-name {
  0% { /* 開始時のスタイル */ }
  25% { /* 25%の時点のスタイル */ }
  50% { /* 50%の時点のスタイル */ }
  75% { /* 75%の時点のスタイル */ }
  100% { /* 終了時のスタイル */ }
}

5. アニメーションのイージング：動きに変化を加える

animation-timing-functionプロパティを使うことで、アニメーションの速度変化を指定することができます。
これにより、より自然で滑らかな動きを表現することができます。

代表的なイージング関数

ease: ゆっくり始まり、徐々に速くなり、最後にゆっくり終わる (デフォルト)

linear: 等速で変化する

ease-in: ゆっくり始まり、徐々に速くなる

ease-out: 最初は速く、徐々に遅くなる

ease-in-out: ゆっくり始まり、途中は速く、最後にゆっくり終わる

cubic-bezier(x1, y1, x2, y2): より細かく速度変化を指定

cubic-bezier()関数

cubic-bezier()関数は、ベジェ曲線を使って速度変化を指定することができます。
ベジェ曲線は、4つの制御点を使って曲線を定義します。
cubic-bezier()関数の引数には、2番目と3番目の制御点の座標を指定します。

例えば、cubic-bezier(0.25, 0.1, 0.25, 1) は、以下のような速度変化を表します。

最初はゆっくり

途中は速く

最後はゆっくり

6. アニメーションの前後に適用されるスタイル： animation-fill-mode

animation-fill-modeプロパティは、アニメーションの開始前と終了後に、要素にどのスタイルを適用するかを指定することができます。

none: アニメーションの前後には、要素の通常のスタイルが適用されます (デフォルト)

forwards: アニメーション終了時のスタイルが、アニメーション後も維持されます

backwards: アニメーション開始前のスタイルが、アニメーション開始時から適用されます

both: forwards と backwards の両方が適用されます

7. 詳細はあとから表示する：隠された情報をスタイリッシュに表示

Webサイトでよく見かける、最初は隠されていて、マウスホバー時に詳細情報が表示される効果も、CSSで簡単に実現できます。

下から出る詳細

transform: translateY(); プロパティを使って、詳細情報を下からスライドインさせることができます。

.item {
  position: relative;
  overflow: hidden;
}

.item .details {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.item:hover .details {
  transform: translateY(0);
}

くるんと裏返る

transform: rotateX(); プロパティと backface-visibility: hidden; プロパティを使って、カードを裏返すような効果を実現できます。

.card {
  position: relative;
  perspective: 1000px; /* 遠近感 */
}

.card .front,
.card .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.5s ease;
}

.card .back {
  transform: rotateX(180deg);
}

.card:hover .front {
  transform: rotateX(180deg);
}

.card:hover .back {
  transform: rotateX(0deg);
}

左右から背景が出てくる

::before 擬似要素と ::after 擬似要素を使って、左右から背景をスライドインさせることができます。

.item {
  position: relative;
  overflow: hidden;
}

.item::before,
.item::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #eee;
  transition: transform 0.3s ease;
}

.item::before {
  left: 0;
  transform: translateX(-100%);
}

.item::after {
  right: 0;
  transform: translateX(100%);
}

.item:hover::before {
  transform: translateX(0);
}

.item:hover::after {
  transform: translateX(0);
}

まとめ

CSSの transition プロパティと animation プロパティを使用することで、マウスホバー時に様々な動きを表現することができます。
これらのプロパティを組み合わせることで、より複雑で魅力的なアニメーション効果を作成することも可能です。

参考文献

さらなる詳細については、以下のリソースを参照してください。 MDN Web Docs - :hover

Q&A

Q1: &:hoverは何のために使用しますか？

A1: &:hoverは、要素にカーソルが乗ったときのスタイルを変更するために使用します。

Q2: ボタンのサイズを変えるにはどうすればいいですか？

A2: &:hoverにpaddingやfont-sizeプロパティを追加することで、ボタンのサイズを変更できます。

Q3: ホバー効果を他の要素にも適用できますか？

A3: はい、他の要素にも:hover擬似クラスを使用して、同様の効果を適用できます。

その他の参考記事:css cursor