[Edit]

CSS - create button with hover effect

1 contributors

2 contributions

0 discussions

0 points

Created by:

Inayah-Alexander

767

In this article, we would like to show you how to create a button with a hover effect using CSS.

Quick solution:

xxxxxxxxxx
 
button:hover {
  background: red;  /* changes background color on hover */
}

The :hover CSS pseudo-class is triggered when the user hovers over an element with the cursor, changing the element style to the one specified within curly brackets.

Practical example

Edit

In this example, we change color of the button element with the following steps:

in button style, we specify the button's style at the beginning and use the transition property to smoothly change the style of the button element over 0.5 second,
we use button:hover pseudo-class to add or overwrite existing button styles on the hover event.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    button {
      color: white;
      height: 75px;
      width: 75px;
      border: 2px solid #0086b3;
      border-radius: 5px;
      background: deepskyblue;
      transition: 0.5s;
    }
​
    button:hover {
      background: #33ccff;
      box-shadow: 0px 0px 5px 5px rgba(0, 172, 230, 0.3);
    }
​
  </style>
</head>
<body>
  <button>Click me.</button>
</body>
</html>