designWeb全般webmasterデザインメモTOPコーディングCSS【CSS】マウスオーバー時のエフェクトボタンやテキストリンクにマウスオーバーしたときにつけるエフェクトの種類をいくつか見ていきます。CSSを使うだけで簡単に表現することができます。背景色の変化まずは、単純にマウスオーバーしたときに背景色が変わるエフェクトの作り方です。ここでは色の変化ではなく、元の背景色の不透明度を変える動きにします。背景色から白抜きのボーダーに変化するエフェクトの作り方です。#ff9900;}ボーダーの変化マウスオーバー時に四角から角丸へボーダーを変化させるエフェクトの作り方です。50px;}ボタンを浮かせるボタンをマウスオーバーしたときにちょっと浮く感じにするエフェクトの作り方です。0.7;}下線が出てくるテキストリンクをマウスオーバーしたときに下線がスッと出てくるエフェクトの作り方です。100%;}その他のマウスオーバーエフェクトその他のアニメーションがついたマウスオーバー時のエフェクトのサンプルをいくつか紹介します。内側にボーダーで囲むエフェクトhover6波紋のようなエフェクトhover7マウスオーバーでキャプション表示マウスオーバーするとキャプションが表示されます。手軽に作れるマウスオーバーの動きについて紹介しました。これ以外にもまだまだマウスオーバー時のエフェクト表現はたくさんありますので、色々と試してみてください。