DEV Community 👩‍💻👨‍💻

Cover image for Button Hover Effect Using HTML/CSS
Abdallah Muhammed
Abdallah Muhammed

Posted on

Button Hover Effect Using HTML/CSS

let's make a button hover effect.

first, use a button tag is very important for the behavior.

please don't use < a > tag for buttons. they have different meanings and behavior.

< a > tag is used for link responses not for actions like < button > tags.

< a > used for navigation, user can click it to open in a new tab, all that I want to tell you,

don't use < a > tags for make an action use < button > tags for that, and now let's start to make our

beautiful button effect.

let's make our body HTML Tage :

Alt Text

You should be able to use < button > everywhere, but if you want something, and Now Let's Make The Stylesheet.

Styleseet

1- let's make the CSS for a button with the regular style, we pass the position relative to the button because we will make the span absolute later to make our effect.

Alt Text

you should have a regular style like this :

Alt Text

2- we need to focus on the < span > tag it will take all the work, let's give it some style
Alt Text

we give it a display: block to respect all the height and width of our button, we need to make sure that,

our span has the full width and height of the < button > tag when we hover it.

3- next, we need to make a beautiful effect that when we hover the Button or the < span > tag,

we get the beautiful effect, let's make the before And after to the span.

Alt Text

now we have the position absolute for the before < span > tag with 50% width and

z-index -1 to make sure that the effect uder the title of the < span > tag, transform:scaleX and transform-origin for the direction of the before effect

the transition for the smooth effect

Alt Text

NOTE: the scaleX = 1 in The photo we will put it = 0 in the first and when we hover the before it will change to 1 With a small transition effect

4- let's make the after effect too, the same with the before

Alt Text

5- let's make The NOTE and make the after and before hover effect

Alt Text

all what we need is to change the scaleX and make a nice transition.

Finally,

we did it, in the end, you should have a nice and smooth effect button link this :

https://codepen.io/abdallahifox/pen/NJGoVV?editors=1100

The-End

I made it with HTML/CSS, but it can be achieved with any Framework as well. I hope your main take away will be thinking of a button effect how to make the effect, not the code itself.

Top comments (0)

🌚 Life is too short to browse without dark mode