/* Button hover effect */
.btn span {
position: relative;
z-index: 1;
transition: all 0.3s ease-in-out;
}
.btn:before, .btn:after {
position: absolute;
width: 120%;
height: 40px;
border: 70px solid;
transition: all 0.4s ease-in-out;
content: "";
}
.btn:before {
top: -73px;
left: -120%;
border-color: transparent transparent #fff transparent;
}
.btn:after {
top: -3px;
right: -120%;
border-color: #fff transparent transparent transparent;
}
.btn:hover:before {
left: 0;
}
.btn:hover:after {
right: 0;
}
.btn:hover span {
color: #ea355a;
}
.btn:active {
transform: translateY(2px);
box-shadow: 0 1px 0 #bd1962;
}
button-hover-before-after-gorizontal-scroll
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.