BUTTON
View CSS
View HTML
.swipe-btn {
display: inline-block;
padding: 10px 43px;
font-size: 17px;
cursor: pointer;
position: relative;
color: #fff;
text-align: center;
z-index: 1;
letter-spacing: 2px;
overflow: hidden;
border: 2px solid #fff;
line-height: normal;
background-color: #2735d5;
}
.swipe-btn::before {
position: absolute;
content: "";
display: block;
width: 0;
height: 100%;
top: 0;
right: 0;
background-color: rgb(14, 35, 72);
z-index: -1;
pointer-events: none;
-webkit-transition: all .3s cubic-bezier(.77,0,.175,1);
transition: all .3s cubic-bezier(.77,0,.175,1);
}
.swipe-btn:hover::before {
width: 100%;
left: 0;
right: auto;
}
.swipe-btn:hover {
animation: popup 1.5s;
}
@keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(.75);
}
75% {
transform: scale(1.15);
}
100% {
transform: scale(1);
}
}
<div class="swipe-btn">
BUTTON
</div>