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)
HTML
<button class="btn-2"><span>Hover Me</span></button>
CSS
.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;
}
I have been unable to successfully make the effect work for a curved button
Thank you for any help
New contributor
Catcha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.