I have the following design:

r/webdev - How to implement a hover effect on a button?

The button on the left is the normal one without effects, it was pretty easy to implement nothing fancy here, the container was 52px by 52px.

The button on the right is the same button, but with a slight hover effect applied to it. The hover effect (I don’t know if you can see) is a border that extends from the middle to the edges of the container with a specific border radius, how would this be implemented?

Here’s my markup:

<button class="rbtn rbtn-close">
    <i class="fas fa-times-circle"></i>

Thanks in advance

Source link

Write A Comment