В данном виде кнопок реализовано использование псевдоэлементов для имитации границы элемента с переходом и чередующимся transform-origin при наведении. Довольно интересное решение для наведении на кнопку. В демонстрации показаны два примера. Отличие в них в том, что все эффекты осуществляются в обратном порядке. Какой вид выбирать, решать только вам. Оба вида красивы.
1. Вставить в нужное место :
<h2>По часовой стрелке</h2>
<div class="row">
<div class="button clockwise horizontal">Горизонталь</div>
<div class="button clockwise vertical">Вертикаль</div>
<div class="button clockwise both">И то и другое<div class="inner"></div></div>
</div>
<h2>Против часовой стрелки</h2>
<div class="row">
<div class="button counterclockwise horizontal">Горизонталь</div>
<div class="button counterclockwise vertical">Вертикаль</div>
<div class="button counterclockwise both">И то и другое<div class="inner"></div></div>
</div
.button {
position: relative;
cursor: pointer;
color: white;
font-family: sans-serif;
font-size: 1.5em;
padding: 0.5em 1em 0.65em;
margin: 0 10px;
background: #3c4650;
}
.button .inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.button:nth-of-type(1):before,
.button:nth-of-type(1):after,
.button:nth-of-type(1) .inner:before,
.button:nth-of-type(1) .inner:after {
background-color: #ffa726;
}
.button:nth-of-type(2):before,
.button:nth-of-type(2):after,
.button:nth-of-type(2) .inner:before,
.button:nth-of-type(2) .inner:after {
background-color: #26a69a;
}
.button:nth-of-type(3):before,
.button:nth-of-type(3):after,
.button:nth-of-type(3) .inner:before,
.button:nth-of-type(3) .inner:after {
background-color: #7e57c2;
}
.button:before,
.button:after,
.button .inner:before,
.button .inner:after {
position: absolute;
content: "";
display: block;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.button.horizontal:before,
.button.horizontal:after,
.button.both:before,
.button.both:after {
left: 0;
width: 100%;
height: 2px;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
.button.horizontal .inner:before,
.button.horizontal .inner:after,
.button.both .inner:before,
.button.both .inner:after {
top: 0;
width: 2px;
height: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
.button.horizontal .inner:before,
.button.both .inner:before {
left: 0;
}
.button.horizontal .inner:after,
.button.both .inner:after {
right: 0;
}
.button.horizontal .inner:hover:before,
.button.horizontal .inner:hover:after,
.button.both .inner:hover:before,
.button.both .inner:hover:after {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.button.horizontal:before,
.button.both:before {
top: 0;
}
.button.horizontal:after,
.button.both:after {
bottom: 0;
}
.button.horizontal:hover:before,
.button.horizontal:hover:after,
.button.both:hover:before,
.button.both:hover:after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.button.horizontal:hover .inner:before,
.button.horizontal:hover .inner:after,
.button.both:hover .inner:before,
.button.both:hover .inner:after {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.button.horizontal.clockwise .inner:before,
.button.both.clockwise .inner:before {
-webkit-transform-origin: top center;
transform-origin: top center;
}
.button.horizontal.clockwise .inner:after,
.button.both.clockwise .inner:after {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.button.horizontal.clockwise:before,
.button.both.clockwise:before {
-webkit-transform-origin: right center;
transform-origin: right center;
}
.button.horizontal.clockwise:after,
.button.both.clockwise:after {
-webkit-transform-origin: left center;
transform-origin: left center;
}
.button.horizontal.clockwise:hover .inner:before,
.button.both.clockwise:hover .inner:before {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.button.horizontal.clockwise:hover .inner:after,
.button.both.clockwise:hover .inner:after {
-webkit-transform-origin: top center;
transform-origin: top center;
}
.button.horizontal.clockwise:hover:before,
.button.both.clockwise:hover:before {
-webkit-transform-origin: left center;
transform-origin: left center;
}
.button.horizontal.clockwise:hover:after,
.button.both.clockwise:hover:after {
-webkit-transform-origin: right center;
transform-origin: right center;
}
.button.horizontal.counterclockwise .inner:before,
.button.both.counterclockwise .inner:before {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.button.horizontal.counterclockwise .inner:after,
.button.both.counterclockwise .inner:after {
-webkit-transform-origin: top center;
transform-origin: top center;
}
.button.horizontal.counterclockwise:before,
.button.both.counterclockwise:before {
-webkit-transform-origin: left center;
transform-origin: left center;
}
.button.horizontal.counterclockwise:after,
.button.both.counterclockwise:after {
-webkit-transform-origin: right center;
transform-origin: right center;
}
.button.horizontal.counterclockwise:hover .inner:before,
.button.both.counterclockwise:hover .inner:before {
-webkit-transform-origin: top center;
transform-origin: top center;
}
.button.horizontal.counterclockwise:hover .inner:after,
.button.both.counterclockwise:hover .inner:after {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.button.horizontal.counterclockwise:hover:before,
.button.both.counterclockwise:hover:before {
-webkit-transform-origin: right center;
transform-origin: right center;
}
.button.horizontal.counterclockwise:hover:after,
.button.both.counterclockwise:hover:after {
-webkit-transform-origin: left center;
transform-origin: left center;
}
.button.vertical:before,
.button.vertical:after {
top: 0;
width: 2px;
height: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
.button.vertical:before {
left: 0;
}
.button.vertical:after {
right: 0;
}
.button.vertical:hover:before,
.button.vertical:hover:after {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.button.vertical.clockwise:before {
-webkit-transform-origin: top center;
transform-origin: top center;
}
.button.vertical.clockwise:after {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.button.vertical.clockwise:hover:before {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.button.vertical.clockwise:hover:after {
-webkit-transform-origin: top center;
transform-origin: top center;
}
.button.vertical.counterclockwise:before {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.button.vertical.counterclockwise:after {
-webkit-transform-origin: top center;
transform-origin: top center;
}
.button.vertical.counterclockwise:hover:before {
-webkit-transform-origin: top center;
transform-origin: top center;
}
.button.vertical.counterclockwise:hover:after {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
