ホバー(hover)時に動きのある下線を入れる方法【CSSのみ】

CSSのみで動きのあるホバー(hover)時エフェクトを実装する(下線)

前回の記事で「リンクや画像などのホバーをCSSのみで光ったように見せる方法【JS不要】」を紹介しましたが、有り触れていてつまらない!と思う人も多いのではないでしょうか?
よっぽど画像だけのバナー以外は僕自身も上記の方法は現状使っていません。

jQueryを使わなくても動きのあるホバーをつけることができるので今回は動きのある下線をテーマに紹介します!

 

 

動きのある下線エフェクト実装

HTML

<div class="btn"><a href="#">ボタン01</a></div>
<div class="btn"><a href="#">ボタン02</a></div>
<div class="btn"><a href="#">ボタン03</a></div>
<div class="btn"><a href="#">ボタン04</a></div>
<div class="btn"><a href="#">ボタン05</a></div>

 

CSS

.btn a{
font-size: 15px;
color: #000;
text-decoration: none;
position: relative;
display: inline-block;
}

.btn a:after{
position: absolute;
bottom: -2px;
left: 0;
content: '';
width: 0;
height: 1px;
background-color: #e8374a; /*線の色。*/
transition: .3s; /*時間の指定。*/
}

.btn a:hover::after {
width: 100%; /*0だった幅を100%にする。*/
}

 

「下線ホバーアニメーションデモページ」

 

簡単な解説

ボタンのaタグをポジションで基準とし、afterで下に空の横幅0pxのコンテンツを作り、hoverされたときにそのコンテンツを横に100%まで伸ばすというCSSです。

 

 

まとめ

いかがでしょうか!
こんな感じで簡単にアニメーションの付いた動きが実装できます。
これを応用すれば縦方向だったり、背景全体を動かしたりもできるので数値を変えて遊んでみてください。

コメント