Gatsby Logo
Tutorials

Hover Animation of a Button using only CSS

A tutorial on how to animate a button using only CSS.

Jaideep Guntupalli

Jaideep Guntupalli

Published 08 Aug 2022

Hover Effect
Hover Effect

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.

Hover effect
End result gif

HTML

We need to add a button in the body of your index.html file, as shown below.

Screenshot of html code
HTML Starter Code

You must link your stylesheet section if you aren't on a CodePen. I am using the Montserrat font family to style the text in the button from Google Fonts. You can use your favorite font from Google fonts but don't forget to include the required lines in the section.

CSS

Let's now start CSS for this.

Body

First, let's add the background color and font family by selecting the whole body. We can use either the background or background-color property to set the color for the background. I randomly chose a theme from Coolors and used #ffe8d6 it as the background color. For the Font family, we will use font-family property to set the font and add sans-serif it as the fallback font.

CSS Starter code to center the button using flexbox
Adding background colour and centering the button using flex

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 will be tricky to get the hang of it at the start.

Button Rest state

Now let's get to styling the button. First, let's remove that ugly background by setting background the property to none or transparent. Then, increase the font-size to large for visibility and put them font-weight to 800. Set the color property to #6b705c, which sets the font color. Let's make font to all CAPS by setting text-transform the property to uppercase. As shown below, let's add some padding and border to the button.

screenshot of css for button rest state
CSS for button rest state

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 to 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 it as the background to the button. We will also change the font's color using color the 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 shadows using box-shadow the property. For more details, check out this MDN page about box-shadow. We will also set cursor to the pointer to show the hand symbol instead of the arrow we get.

Screenshot of css of button hover state
CSS for button hover state

Button Transitions

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.

Screenshot of css of transition between states
CSS for transition between hover and rest state of button

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!

csscss-animationweb-development

You may also like...

Hover Effect

Hover Animation of a Button using only CSS

Jaideep Guntupalli

Jaideep Guntupalli

08 Aug 2022

html semantic illustration
How does the Internet work?

How does the Internet work?

Jaideep Guntupalli

Jaideep Guntupalli

25 Jul 2022