マウスオーバー（hover）のエフェクトをtransitionプロパティを使って超簡単にオシャレにする方法

aタグのマウスオーバー（hover）で、テキストや背景の色を変えたりする時に実装するとオシャレになるオススメテクニックを紹介します。といっても、CSSのaセレクタに1行加えるだけと超簡単。

aセレクタにtransitionプロパティを追加。transitionは時間的変化を指定するプロパティで:hoverなど動きがあるスタイルなどに使えます。

ぬるっと変わる動作デモ

「テスト」にマウスオンするとぬるっとエフェクトします。ちょっとオシャレなサイトのボタンに良くある感じのアレです。でも実際に追加したのはtransitionプロパティだけ。

デモ / DEMO

CSSだけで簡単に実装出来て軽量な上、普通のリンクよりちょっとリッチになるのでおすすめ。シンプルで高級感を出したいサイトや、落ち着いたデザインのサイトに使えそうですね。デザインだけではちょっと押しが足りない時に、こういったテクニックがあると、デザイナーにとっては強力な武器になりますね！