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
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)