マウスオーバー（hover）のエフェクトをtransitionプロパティを使って超簡単にオシャレにする方法
aタグのマウスオーバー（hover）で、テキストや背景の色を変えたりする時に実装するとオシャレになるオススメテクニックを紹介します。といっても、CSSのaセレクタに1行加えるだけと超簡単。
aセレクタにtransitionプロパティを追加。transitionは時間的変化を指定するプロパティで:hoverなど動きがあるスタイルなどに使えます。
1 2 3 4 5 6 7 8 9 10 11 | a.demo01 { padding:10px 20px; border:1px solid #fff; background:#efefef; transition: all 0.5s ease 0s; /*これがぬるっとしてくれる*/ } a.demo01:hover { padding:10px 20px; border:1px solid #efefef; background: #fff; } |
ぬるっと変わる動作デモ
「テスト」にマウスオンするとぬるっとエフェクトします。ちょっとオシャレなサイトのボタンに良くある感じのアレです。でも実際に追加したのはtransitionプロパティだけ。
CSSだけで簡単に実装出来て軽量な上、普通のリンクよりちょっとリッチになるのでおすすめ。シンプルで高級感を出したいサイトや、落ち着いたデザインのサイトに使えそうですね。デザインだけではちょっと押しが足りない時に、こういったテクニックがあると、デザイナーにとっては強力な武器になりますね！