CSSのみでリンクのボタンにアニメーション付きホバーエフェクトを付けてみた｜カケウェブ

ボタンにアニメーションホバーを付ける

前回「ホバー（hover）時に動きのある下線を入れる方法【CSSのみ】」でテキストのリンクの下にアニメーション付きのボーダーを付けるCSSを紹介しましたが、今回はそれの応用でボタン（リンクボタン）ににゅーんと出てくるアニメーション付きのホバーアニメーションを付けてみました。

それでは実装していこう！

動きのあるホバーアニメーション実装

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{
	width: 250px;
	border-bottom: 1px dotted #000;
}

.btn a{
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 15px;
	color: #000;
	text-decoration: none;
	position: relative;
	display: block;
}

.btn a:after{
	width: 0;
	height: 50px;
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	background-color: #e8374a;
	transition: .3s;
}

.btn a:hover{
	color: #FFF;
}

.btn a:hover::after {
 	width: 100%;
	z-index: -1;
}

デモページ