問題 × 解決策

ロールオーバーで線を走らせて囲い線を形成するボタンをcssで作る

問題

線を走らせるには?

解決策

疑似要素を使い、「position: absolute」で角に配置し、ロールオーバー時に適宜、幅、高さを100%にする。 その時に「transition: duration」を設定しておく。

 

cssで線を走らせる。

ロールオーバーで線を走らせて囲い線を形成するボタンをcssで作る一例をご紹介します。

DEMOはこちら

HTMLはこちら

線を4辺分用意するため、ボタンの中を囲うタグと空のタグを用意します。

<p class="btn-bd">
	<a href="#">
		<span class="inner">ボタン<span class="ln"></span></span>
	</a>
</p>

CSSはこちら

  1. ボタンを囲うタグと空のタグそれぞれの疑似要素「before/after」に「position: absolute;」を設定して4点の角に配置します。
  2. transition: delay」を使って、4辺それぞれの線を走らせるタイミングを調整します。
.btn-bd a{
	color: #ffffff;
	background-color: #F15A24;
}
.btn-bd a,
.btn-bd a .inner{
	display: inline-block;
	padding: 10px;
	position: relative;
}
.btn-bd a .inner .ln{
	display: inline-block;
	position: absolute;
	top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	margin: auto;
}
.btn-bd a .ln::after,
.btn-bd a .ln::before,
.btn-bd a .inner::after,
.btn-bd a .inner::before {
	content: '';
	display: block;
	position: absolute;
	background-color: #ffffff;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}
.btn-bd a .ln::after {
    height: 1px;
    left: 0;
    top: 0;
    width: 0px;
	transition-delay: 0.9s;
	-webkit-transition-delay: 0.9s;
	-moz-transition-delay: 0.9s;
	-o-transition-delay: 0.9s;
	-ms-transition-delay: 0.9s;
}
.btn-bd a:hover .ln::after {
	transition-delay: 0s;
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-o-transition-delay: 0s;
	-ms-transition-delay: 0s;
}
.btn-bd a .ln::before {
	bottom: 0;
	height: 1px;
	right: 0;
	width: 0px;
	transition-delay: 0.3s;
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
}
.btn-bd a:hover .ln::before {
	transition-delay: 0.6s;
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	-ms-transition-delay: 0.6s;
}
.btn-bd a .inner::after {
	bottom: 0;
	height: 0;
	left: 0;
	width: 1px;
	transition-delay: 0s;
	-webkit-transition-delay: 0s;
	-moz-transition-delay:0s;
	-o-transition-delay: 0s;
	-ms-transition-delay: 0s;
}
.btn-bd a:hover .inner::after {
	transition-delay: 0.9s;
	-webkit-transition-delay: 0.9s;
	-moz-transition-delay: 0.9s;
	-o-transition-delay: 0.9s;
	-ms-transition-delay: 0.9s;
}
.btn-bd a .inner::before {
	height: 0;
	right: 0;
	top: 0;
	width: 1px;
	transition-delay: 0.6s;
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	-ms-transition-delay: 0.6s;
}
.btn-bd a:hover .inner::before {
	transition-delay: 0.3s;
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
}
.btn-bd a:hover .ln::after,
.btn-bd a:hover .ln::before {
	width: 100%;
}
.btn-bd a:hover .inner::after,
.btn-bd a:hover .inner::before {
	height: 100%;
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

6 + 17 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧