Hover Effect Using Css

The hover effect is used to add some cool design to our web content. Hover effects are mostly applied on links, image and even on buttons. There is no limit to what you can do with hover effect, and so, in this tutorial, we would be learning how to create hover effect using CSS which will be applied to a button on our webpage.

Example

Html

<div class="container">
      <button class="btn">Hover Me</button>
    </div>

Next. we will style the button in Css

Css

.btn {
  color: white;
  padding: 0.5em 0.8em;
  background-color: orangered;
} 

Adding Hover Effect

To add hover effect, we will use the hover pseudo selector in Css as shown below

.btn:hover {
  background-color: white;
  color: black;
}

whatever style we specified in the hover block will be applied when the a user hover over the button.

this is how to add hover effect to your any element on your webpage.

If you don’t want the change to happen so quick as it’s doing now, you can add transition.

New Css

.btn {
  color: white;
  padding: 0.5em 0.8em;
  background-color: orangered;
  transition: background 0.5s linear;
}
.btn:hover {
  background-color: white;
  color: black;
}

Adding transition will make the hover effect to happen within the specified time.

Hopefully you understand this tutorial and do well to check how to create a responsive navbar using Html and Css