ボタンをホバーしたときのエフェクトまとめ（基本編） | たねっぱ！

はじめに 共通部分のHTML/CSSです。btnCommonはボタンの装飾、btn00は それぞれのボタンによって異なります。 <p><a href="#" class="btnCommon btn00">button</a></p> p{ text-align: center; } .btnCommon a{ position: relative; display: block; width: 150px; height: 46px; box-sizing: border-box; padding: 10px; border: 1px solid #333; color: #333; transition: .2s; } ゆっくりと背景色が変化 よく見る動作の１つですね。簡単に実装できて、使いやすいです。 button1 /* ボタン１ */ .btn01:hover { backgro