はてなブックマーク

CSSで作成したボタンにカーソルをマウスオーバーした際に、色が変わる、大きさが変わるなど様々な効果を付けるホバーエフェクトのサンプルをまとめてみました。 色を変える ホバーするとボタンの背景色が変わるエフェクトです。 SAMPLE <a href="#">SAMPLE</a> a { color: #fff; font-size: 16px; font-weight: bold; background: #333; padding: 18px 30px; border-radius: 6px; transition: .3s; } a:hover { background: #13c3ac; } transitionを設定することで、色の変化にわずかにじんわりとした動きをつけています。 透過する ホバーすると、ボタン全体が透過するエフェクトです。 SAMPLE <a href="#">SA