【コピペOK】CSSホバーエフェクト！初心者でも手軽に実装できる方法！

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

CSSのホバーエフェクトは、ウェブサイトに効果を加えることができる便利な機能です。

初心者でも簡単に実装できるホバーエフェクトの使い方と活用例をご紹介します。是非活用してみてください！

ふとそんな疑問を抱いてしまう人もいるのではないでしょうか。

CSS ホバーエフェクトについて
CSS ホバーエフェクトの使い方
1. 今回利用する共通のHTML/CSS
実際の例の前に、実装するコツを3つご紹介！
透過
下線
グラデーション
キラリ
左から右にハイライト•ホバーエフェクト
まとめ

CSS ホバーエフェクトについて

ウェブページ上の、マウスを使って特定のアイテムを見たときに、そのアイテムが変わって見えるものを意味します。例えば、マウスを合わせると「ボタンの色が変わる」「サイズが大きくなる」といったものです。
これを使うことで、ウェブページ上で今、何を、選択しようとしているのかを分かりやすくなります。

CSS ホバーエフェクトの使い方

CSS ホバーエフェクトを使うには、
以下の手順に従います。

HTML要素を定義する: hover effectを適用する対象のHTML要素を定義します。

CSSスタイルを定義する: hover effectを適用するCSSスタイルを定義します。これには、「:hover」セレクターを使用します。

マウスオーバー時のスタイルを定義する: 「:hover」セレクターを使って、マウスオーバー時のスタイルを定義します。これには、背景色の変更や文字の色の変更などが含まれます。

今回利用する共通のHTML/CSS

<a class="button" href="#">
      <div>Hover me!</div>
</a>

.button  {
    width: 209px;
    padding: 14px 0 16px 0;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    display: block;
    margin: 0 auto;
    background: #4588ec;
    border-radius: 50px;
}

a{
  display: block;
  width: 209px;
  color: #fff;
  text-decoration: none;
}

a:hover{
   /* ここに追加のCSSを記載します */
}

このように、CSS hover effectを使うことで、HTML要素のマウスオーバー時に特定のスタイルを適用することができます。

実際の例の前に、実装するコツを3つご紹介！

トランジションを使用する: トランジションを使用することで、マウスオーバー時の変化をゆっくりとした動きにすることができます。
多様なエフェクトを検討する: hover effectには、画像の大きさの変更、テキストの色の変更、背景色の変更など、様々なエフェクトがあります。使いたいエフェクトを検討し、実装してみてください。
マウスオーバー時のエフェクトのバランスを考慮する: hover effectは、マウスオーバー時に適用されるエフェクトのバランスが重要です。過剰なエフェクトはユーザーに邪魔になる可能性があります。

このように、CSS hover effectを画像やテキストに実装する際には、トランジションの使用や多様なエフェクトの検討、マウスオーバー時のエフェクトのバランス、背景色との調和などを考慮することが重要です。

透過

CSS hover effectで透過させるには、CSSの「opacity」プロパティを使用します。「opacity」プロパティは、要素の透明度を指定することができます。値が小さいほど透明になり、値が大きいほど不透明になります。

<a class="button" href="#">
      <div>Hover me!</div>
</a>

.button  {
    width: 209px;
    padding: 14px 0 16px 0;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    display: block;
    margin: 0 auto;
    background: #4588ec;
    border-radius: 50px;
}
a{
  display: block;
  width: 209px;
  color: #fff;
  text-decoration: none;
}
a:hover{
  opacity: 0.5;
  transition: opacity 0.5s ease-in-out;
}

このように、「opacity」プロパティの値を「1」から「0.5」に変更し、トランジションを使用することで、マウスオーバー時に透過させることができます。

下線

<a class="button" href="#">
  <div>Hover me!</div>
</a>

.button  {
    width: 209px;
    padding: 14px 0 16px 0;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    display: block;
    margin: 0 auto;
    background: #4588ec;
    border-radius: 50px;
}
a{
  display: block;
  width: 209px;
  color: #fff;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
  transition: opacity 0.5s ease-in-out;
}

このように、「text-decoration」プロパティの値を「underline」と入力しマウスオーバー時に下線を表示させることができます。

グラデーション

<a class="button" href="#">
 <div>Hover me!</div>
</a>

.button  {
    width: 209px;
    padding: 14px 0 16px 0;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    display: block;
    margin: 0 auto;
    background: #4588ec;
    border-radius: 50px;
}
a{
  display: block;
  width: 209px;
  color: #fff;
  text-decoration: none;
}

a:hover{
  opacity: 0.5;
  transition: opacity 0.5s ease-in-out;
  background: linear-gradient(to right, #4588ec, #a0c6fe);
}

このように、「background」プロパティの値をマウスオーバー時に変更することで、グラデーションを表示させることができます。「transition」プロパティは、CSSの変更をスムーズにするために使用します。

この例では、「background:」の変更を0.5秒かけてスムーズに変更するように設定しています。

キラリ

<a class="button" href="#">
 <div>Hover me!</div>
</a>

.button  {
    width: 209px;
    padding: 14px 0 16px 0;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    display: block;
    margin: 0 auto;
    background: #4588ec;
    border-radius: 50px;
}
a{
  display: block;
  width: 209px;
  color: #fff;
  text-decoration: none;
}

a:hover{
  opacity: 0.5;
  transition: opacity 0.5s ease-in-out;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff;
}

この CSS スタイルは、ホバーされた要素に四つのボックスシェイドを追加します。各ボックスシェイドは、白色で、異なる大きさです。これにより、閃光のようなエフェクトが表示されます。

左から右にハイライト•ホバーエフェクト

<a class="button" href="#">
 <div>Hover me!</div>
</a>

.button  {
    width: 209px;
    padding: 14px 0 16px 0;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    display: block;
    margin: 0 auto;
    background: #4588ec;
    border-radius: 50px; 
}
.button::before  {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background-color: #fff;
  transition: width 0.3s ease-in-out;
}
a{
  display: block;
  width: 209px;
  color: #fff;
  text-decoration: none;
}

a:hover{
  opacity: 0.5;
  transition: opacity 0.5s ease-in-out;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff;
}
a:hover::after{
  width: 100%;
}

この CSS スタイルは、ホバーされた要素に新しい要素を生成します (:before セレクタを使用)。
この新しい要素は、白色の背景色を持つ左から右に伸びる要素です。この要素の幅は、ホバーされたときに 100% に変更されます (width: 100%)。これにより、左から右にハイライト・ホバーエフェクトが表示されます。