Pure CSS Next Prev Arrow Hover Effects - Animated Transformicons Tutorial
Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng Next Prev Arrow Hover đơn giản bằng CSS3 vô cùng ấn tượng.
<div id="btn-container">
<a href="" class="btn-effect prev"><span></span></a>
<a href="" class="btn-effect next"><span></span></a>
</div>
#btn-container {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
.btn-effect {
width: 40px;
height: 40px;
background: #262626;
border-radius:50%;
margin: 0 5px;
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;
position: relative;
display: block;
span {
position: absolute;
top:50%;
width: 10px;
height: 10px;
left: 50%;
border:2px solid #fff;
-webkit-transform: translate(-50%,-50%) rotate(-45deg);
-ms-transform: translate(-50%,-50%) rotate(-45deg);
transform: translate(-50%,-50%) rotate(-45deg);
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;
&:before {
content: "";
position: absolute;
width: 20px;
height: 2px;
background: #fff;
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
}
&.prev {
span {
border-right: none;
border-bottom: none;
&:before {
-webkit-transform: rotate(45deg) translate(-2px, -0.7px) scale(0);
-ms-transform: rotate(45deg) translate(-2px, -0.7px) scale(0);
transform: rotate(45deg) translate(-2px, -0.7px) scale(0);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
}
}
}
&.next {
span {
border-left: none;
border-top: none;
&:before {
-webkit-transform: rotate(45deg) translate(-2px, 13.5px) scale(0);
-ms-transform: rotate(45deg) translate(-2px, 13.5px) scale(0);
transform: rotate(45deg) translate(-2px, 13.5px) scale(0);
-webkit-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
}
}
}
&:hover {
background: #0070ff;
&.prev {
span {
left: calc(50% - 5px);
&:before {
-webkit-transform: rotate(45deg) translate(-2px, -0.7px) scale(1);
-ms-transform: rotate(45deg) translate(-2px, -0.7px) scale(1);
transform: rotate(45deg) translate(-2px, -0.7px) scale(1);
}
}
}
&.next {
span {
left: calc(50% + 5px);
&:before {
-webkit-transform: rotate(45deg) translate(-2px, 13.5px) scale(1);
-ms-transform: rotate(45deg) translate(-2px, 13.5px) scale(1);
transform: rotate(45deg) translate(-2px, 13.5px) scale(1);
}
}
}
}
}
}