CSSで実装するボタンホバー時のボーダーアニメーションエフェクト

Posted on May 17th, 2016
Category : Tips

自分用に一覧化したのがほしくて作ったのでシェアします。主にゴーストボタンなどのシンプルなボタンデザインのホバーエフェクトとして使われることが多いと思うボーダーアニメーションのサンプルです。どれも特別派手な動きでもなく同じような感じではありますが全5種類あり、すべてCSSだけで実装しているのでボーダーの太さやカラーなどは簡単に変更可能です。

※閲覧の際にChrome又はFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。

※プレフィックスは省略しているので、必要があれば各自で追記してください。

Button

ホバーすると4辺それぞれに中央から外に向かっていくようにボーダーがひかれるものです。
実装にはHTMLとCSSをそれぞれ以下のように記述します。

HTML

<a class="button" href="#">Button</a>

CSS

.button {
	position: relative;
	display: inline-block;
	padding: .9em 3.6em;
	border: 2px solid #fff;
	color: #fff;
	text-align: center;
	text-decoration: none;
	outline: none;
	transition: all .3s;
}
.button::before,
.button::after {
	position: absolute;
	top: -2px;
	right: -2px;
	bottom: -2px;
	left: -2px;
	z-index: 2;
	content: '';
	transition: all .3s;
}
.button::before {
	border-top: 2px solid #3be5ae;
	border-bottom: 2px solid #3be5ae;
	transform: scale(0, 1);
}
.button::after {
	border-right: 2px solid #3be5ae;
	border-left: 2px solid #3be5ae;
	transform: scale(1, 0);
}
.button:hover {
	color: #3be5ae;
}
.button:hover::after,
.button:hover::before {
	transform: scale(1);
}

Button

左上から右下に向かってだんだんボーダーがひかれていくような感じのもので、疑似要素の初期位置を変更したりホバー時のtransitionを調整するなどすれば、右上からとか右下からともいけます。
実装にはHTMLとCSSをそれぞれ以下のように記述します。

HTML

<a class="button" href="#">Button</a>

CSS

.button {
	position: relative;
	display: inline-block;
	padding: .9em 3.6em;
	border: 2px solid #fff;
	color: #fff;
	text-align: center;
	text-decoration: none;
	outline: none;
	transition: all .2s;
}
.button::before,
.button::after {
	position: absolute;
	top: -2px;
	left: -2px;
	z-index: 2;
	content: '';
	width: 0;
	height: 0;
	border: 2px solid transparent;
}
.button:hover {
	color: #3be5ae;
}
.button:hover::before,
.button:hover::after {
	width: 100%;
	height: 100%;
}
.button:hover::before {
	border-top-color: #3be5ae;
	border-right-color: #3be5ae;
	transition: width .3s, height .3s .3s;
}
.button:hover::after {
	border-bottom-color: #3be5ae;
	border-left-color: #3be5ae;
	transition: height .3s, width .3s .3s;
}

Button

左と下・右と上でそれぞれボーダーがひかれるもので、左右と上下のタイミングをそれぞれずらしたものです。
こちらも少し調整をすることで左と上・右と下というように組み合わせを変更したり、サンプルでは左右が先になっているのを上下を先にひくようにしたりできます。
実装にはHTMLとCSSをそれぞれ以下のように記述します。

HTML

<a class="button" href="#">Button</a>

CSS

.button {
	position: relative;
	display: inline-block;
	padding: .9em 3.6em;
	border: 2px solid #fff;
	color: #fff;
	text-align: center;
	text-decoration: none;
	outline: none;
	transition: all .2s;
}
.button::before,
.button::after {
	position: absolute;
	z-index: 2;
	content: '';
	width: 0;
	height: 0;
	border: 2px solid transparent;
}
.button::before {
	top: -2px;
	left: -2px;
}
.button::after {
	bottom: -2px;
	right: -2px;
}
.button:hover {
	color: #3be5ae;
}
.button:hover::before,
.button:hover::after {
	width: 100%;
	height: 100%;
}
.button:hover::before {
	border-bottom-color: #3be5ae;
	border-left-color: #3be5ae;
	transition: height .3s, width .3s .3s;
}
.button:hover::after {
	border-top-color: #3be5ae;
	border-right-color: #3be5ae;
	transition: height .3s, width .3s .3s;
}

Button

左 → 下 → 右 → 上と順番にボーダーがひかれていくアニメーションです。
実装にはHTMLとCSSをそれぞれ以下のように記述します。

HTML

<a class="button" href="#">Button</a>

CSS

.button {
	position: relative;
	display: inline-block;
	padding: .9em 3.6em;
	border: 2px solid #fff;
	color: #fff;
	text-align: center;
	text-decoration: none;
	outline: none;
	transition: all .2s;
}
.button::before,
.button::after {
	position: absolute;
	z-index: 2;
	content: '';
	width: 0;
	height: 0;
	border: 2px solid transparent;
}
.button::before {
	top: -2px;
	left: -2px;
}
.button::after {
	bottom: -2px;
	right: -2px;
}
.button:hover {
	color: #3be5ae;
}
.button:hover::before,
.button:hover::after {
	width: 100%;
	height: 100%;
}
.button:hover::before {
	border-bottom-color: #3be5ae;
	border-left-color: #3be5ae;
	transition: height .2s, width .2s .2s;
}
.button:hover::after {
	border-top-color: #3be5ae;
	border-right-color: #3be5ae;
	transition: height .2s .4s, width .2s .6s;
}

Button

4辺のボーダーがすべてバラバラにひかれていく感じのもので、これまでのものに比べると多少手間ですが位置を調整すればサンプルとは違った方向に向けてひくこともできます。
実装にはHTMLとCSSをそれぞれ以下のように記述し、こちらに関してはHTMLはaだけでなくspan要素も使用する必要があります。

HTML

<a class="button" href="#"><span>Button</span></a>

CSS

.button {
	position: relative;
	display: inline-block;
	padding: .9em 3.6em;
	border: 2px solid #fff;
	color: #fff;
	text-align: center;
	text-decoration: none;
	outline: none;
	transition: all .3s;
	visibility: hidden;
}
.button::before,
.button::after,
.button span::before,
.button span::after {
	position: absolute;
	z-index: 2;
	content: '';
	width: 0;
	height: 0;
	border: 2px solid transparent;
	transition: all .3s;
}
.button::before {
	top: -2px;
	left: -2px;
	border-left-color: #3be5ae;
}
.button::after {
	bottom: -2px;
	right: -2px;
	border-right-color: #3be5ae;
}
.button span::before {
	bottom: -2px;
	left: -2px;
	border-bottom-color: #3be5ae;
}
.button span::after {
	top: -2px;
	right: -2px;
	border-top-color: #3be5ae;
}
.button:hover {
	color: #3be5ae;
}
.button:hover::before,
.button:hover::after {
	height: 100%;
	visibility: visible;
}
.button:hover span::before,
.button:hover span::after {
	width: 100%;
	visibility: visible;
}