Hover Animation of a Button using only CSS
A tutorial on how to animate a button using only CSS.
4 min read
Hey everyone, this is going to be my first how-to blog. I will try my best to cover every single detail or point to a resource so that your doubts get cleared. Without any due, let's get started.
Today we will be covering how to animate a button as below using only CSS. This will be short and straightforward to implement, but before we start, I expect you to have a basic idea about HTML and CSS, like how to write basic markup and how CSS selectors work. If not, you can go through this playlist by Kevin Powell.
We need to add a button in the body in your index.html file, as shown below.
If you aren't on a CodePen, you will need to link your stylesheet section. I will use the Montserrat font family to style the text in the button, and I got it from Google Fonts. You can use your favorite font from Google fonts but don't forget to include the required lines in the section.
Let's now start CSS for this.
First, let's add the background color and font family by selecting the whole body. We can use either the
background-color property to set the color for the background. I randomly chose a theme from Coolors and used
#ffe8d6 as the background color. For the Font family, we will use
font-family property to set the font to
Montserrat, and we will add
sans-serif as the fallback font.
We will also center the button for more visibility using the
display property set to
flex. If you have no experience using flexbox, you can ignore these for now, or check out this 15 min video by Web Dev Simplified for understanding. It is going to be a bit tricky at the start and to get the hang of it.
Button Rest state
Now let's get to styling the button. First, let's remove that ugly background by setting
background property to
transparent. Then, increase the
large for visibility and put the
800. Set the
color property to
#6b705c, which sets the font color. Let's make font to all CAPS by setting
text-transform property to
uppercase. Now let's add some padding and border to the button, as shown below.
Button Hover state
We have now coded the rest state of the button. Let's now code the hover state of the button.
For this, we will use a pseudo-class called hover. Hover Styles can be applied for an element by adding
:hover syntax to the end of the selector.
We will be changing the background to a darker color to intimate the selection. We will use
#6b705c as the background to the button. We will also change the font's color using
color property to
#ffe8d6(a lighter shade) to make it readable. We will add a
border-radius to create rounded corners for the button. You can keep or remove the
border. But I removed it so that it would give a cleaner animation. We will now shift the button up a bit to give the feeling of the lift. We will do this using the
transformproperty and set it to
translateY(-5px). We will also add shadow using
box-shadowproperty. For more details, check out this MDN page about box-shadow. We will also set the
cursor to the
pointer to show the hand symbol instead of the arrow we get.
Now the before and hover styles are done but, it is too snappy. So we will add some transitions to make it smooth and satisfying.
We will use the transition property to set the timings and time functions. For more details, check out this page from MDN.
Now it should look pretty good and snappy. If you have any doubts, check out my CodePen of the above tutorial, so you can play around with the timings and colors to make your own.
Was this a helpful blog? and did you learn something new?
Comment down below! 👇
And don't forget to give feedback about the blog down below.
Thanks for reading till the end, and see you in the next one!
Cover Photo by KOBU Agency on Unsplash