HTML.form.guide

Creating CSS3 Button Hover Effects

CSS3 button hover effects

The CSS3 “hover” is a pseudo-class that enables you to select and style elements on a web page when the mouse moves over an element. You can use Javascript or CSS style sheets to react to this event depending on your objective.

For example:

button.checkout
{
  background-color:blue;
}

button.checkout:hover
{
 background-color:green;
}

The CSS code above styles a button with class ‘checkout’. The default color of the button is blue and when the mouse is over the button, the color changes to green.

Usage

This effect can be used in very ingenious ways. Let’s say you want to persuade a guest on your website to sign-up for a newsletter that you send out every month. You have strategically placed a big blue button with the text “New On This Site ?” . When the guest clicks the button, the sign-up form magically appears.

Steps To Implement The Hover Effect

Create your webpage

<!Doctype html>
<html>

<head>
  <title>CSS3 Hover Effect</title>
</head>

<body>
  <h1>CSS3 In Action</h1>
</body>

</html>

Add your big blue action button just below the h1 element

<input type="button" value="New On This Site ?" >

Style your big button by adding a style sheet

Style sheets can be either internal or external. Since we’re building a simple webpage, the first option will be used for this tutorial. Add an internal style sheet just after the title tag.

<style></style>

Identify and select the element that will fire the hover effect

There are several ways of identifying web elements on a page, including adding a class, a unique id or just by tags. For our case, we shall use the id method since it’s more pinpointed. Add an id on the button element.

<input type="button" id="go" value="New On This Site ?">

Style your button

When the page loads, the button will have a blue background and text in white.

body {
  padding-left: 100px;
}

input#go {
  background-color: #4c9ed9;
  color: #ffffff;
  padding: 20px 40px
}

The padding style adds some breathing space inside the button to make it look big.

Add the hover effect just below the already existing style so that you have 3 styles

We want to change the background-color from blue to white and the text from white to blue when the user mouses over the button.

input#go:hover {
  background-color: #ffffff;
  color: #4c9ed9
}

Save your page as mainpage.html

This is how the script should look like at this point.

<!DOCTYPE html>
<html>

<head>
  <title>CSS3 Hover Effect</title>
  <style>
    body {
      padding-left: 100px;
    }

    input#go {
      background-color: #4c9ed9;
      color: #ffffff;
      padding: 20px 40px;
      border: 1px solid #111;
    }

    input#go:hover {
      background-color: #ffffff;
      color: #4c9ed9;
      border: 1px solid #111;
    }
  </style>
</head>

<body>
  <h1>CSS3 In Action</h1>
  <input type="button" id="go" value="New On This Site ?" />
</body>

</html>

Demo

Move your mouse over the button

You should see the background-color and text color change. Notice that the color change is reversed as soon as the mouse moves outside the button area. The hover effect is a temporary event that lasts as long as the mouse stays within the styled element.  

The hover effect cannot work on mobile devices since it primarily works with the mouse. For your mobile users, you can consider an alternative. Also as we have mentioned, Javascript is also able to react to a hover event giving you an alternative route to bring up some really cool hidden treasures on your website.

Button Hover Effect Collections

Collection 1

source

Collection 2