問題
線を走らせるには？
解決策
疑似要素を使い、「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はこちら
- ボタンを囲うタグと空のタグそれぞれの疑似要素「before／after」に「position: absolute;」を設定して4点の角に配置します。
- 「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%;
}
コメント