View CSS
View HTML
.clip-btn {
position: relative;
background: rgb(61, 90, 250);
width: 150px;
height: 50px;
text-decoration: none;
cursor: pointer;
}
.clip-bg {
clip-path: circle(20px at 5px 5px);
transition: all 1s ease;
border-radius: 5px;
background: rgb(25, 60, 199);
height: 100%;
width: 100%;
}
.clip-btn:hover .clip-bg {
clip-path: circle(100%);
}
.clip-btn-text {
position: absolute;
font-size: 18px;
font-weight: bold;
text-decoration: none;
color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<a href="#" class="clip-btn">
<div class="clip-bg"></div>
<div class="clip-btn-text">
BUTTON
</div>
</a>