Button Hover Effect Using HTML/CSS

Abdallah Muhammed — Sat, 12 Dec 2020 20:33:36 +0000

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 :

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.

you should have a regular style like this :

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

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.

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

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

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

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