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;
}

 

デモページ

 

 

簡単な解説

今回はリンクのボタン全体の色を変えるので元のボタンの高さと同一の高さをafterにも持たせています。
ただそれだけだと文字より上に背景色がきてしまうのでz-indexを使いテキストよりも後ろに持ってきています。

 

 

まとめ

こんな感じで簡単に動きのあるサイトが作れます!
元から色のあるボタンでやってみたり、下から上に動きを変更してみたり工夫次第でいろいろと表現できるので試してみてください!

コメント