How to fade a button on hover

In this guide you can find out how to do a gentle fade between two colors when hovering over a button.

In our button example, we can change the background of our button by defining a different background color for the :hover dynamic pseudo-class. However, hovering over the button will cause the background-color to snap to the new color. To create a more gentle change between the two, we can use CSS Transitions.

Using transitions

After adding the desired color for the hover state, add the transition property to the rules for the button. For a simple transition, the value of transition is the name of the property or properties you wish this transition to apply to, and the time that the transition should take.

For the :active and :focus pseudo-classes the transition property is set to none, so that the button snaps to the active state when clicked.

In the example the transition takes 1 second, you can try changing this to see the difference a change in speed makes.

html

<div class="wrapper">
  <button class="fade">Hover over me</button>
</div>

.wrapper {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  padding: 5px 10px;
  border: 0;
  border-radius: 5px;
  font-weight: bold;
  font-size: 140%;
  cursor: pointer;
}

.fade:focus,
.fade:active {
  background-color: black;
}

css

.fade {
  background-color: #db1f48;
  color: #fff;
  transition: background-color 1s;
}

.fade:hover {
  background-color: #004369;
}

.fade:focus,
.fade:active {
  background-color: black;
  transition: none;
}

Note: The transition property is a shorthand for transition-delay, transition-duration, transition-property, and transition-timing-function. See the pages for these properties on MDN to find ways to tweak your transitions.