CSS Button Hover

In this tutorial we’re going to explore adding styles to a button on hover. There are multiple reasons as to why you may want to do this we’ve detailed them below:

1. Showing that the button can be clicked – By setting a different style when the button is hovered over it becomes easier for people to tell that the button can be clicked.

2. Makes the text on the button easier to read – If the text on a button is relatively small you may decide that when hovering over that button the text-size should be increased.

3. Encourages the user to click the button, you may want to make the button stand out more and make it easier to click on hover.

Getting started with the CSS:

In order to set the styles for the button on hover you’ll need to decide if you want to specifically set the hover styles for one button or all button styles on a site.

To set the style for all buttons on the site as long as your buttons are written as <button> in HTML you can add CSS to them via:

Button:hover

So for example:

Button:hover {

Font-size: 18px;
Font-weight: ‘700’;

}

With the above example we’re increasing the font size and the font weight when the button is hovered over. As we are targeting the button wrapper directly all buttons on the site will have this applied to them so to be more specific we need to set a class for the button.

An example of this would be: 

<button class=”button-class”> Button Text </button>

Then the CSS would be:

.button-class:hover {

Font-size: 18px;
Font-weight: ‘700’;

}

So by setting a class for that specific button which we can add to multiple buttons throughout the site to have the same hover style we can be more specific.

Further reading:

Adding CSS to WordPress

We hope this provides you with an idea of getting started with setting hover styles for buttons using CSS and HTML. We’d appreciate a share or any comments if you found this useful, thanks!

Leave a Comment

Your email address will not be published. Required fields are marked *