I want to make a button that has this highlight effect when the user hovers over it that works with rounded corners. (Effect is the second button)
https://codepen.io/sarath-ar/pen/dMKxxM
.btn-2::before,
.btn-2::after {
transition-delay: 0s;
}
.btn-2 span::before,
.btn-2 span::after {
transition-delay: 0.2s;
}
.btn-2::before {
right: 0;
top: 0;
}
.btn-2::after {
left: 0;
bottom: 0;
}
.btn-2 span::before {
left: 0;
top: 0;
}
.btn-2 span::after {
right: 0;
bottom: 0;
}
.btn-2:hover::before,
.btn-2:hover::after {
transition-delay: 0.2s;
}
.btn-2:hover span::before,
.btn-2:hover span::after {
transition-delay: 0s;
}
<button class="btn-2"><span>Hover Me</span></button>
I have been unable to successfully make the effect work for a curved button