How Can I Darken Buttons on Hover Using CSS?

Enhancing Button Darkening with CSS

When hovering over buttons, it's common to enhance their visual impact by slightly darkening their background color. While manually determining a darker hex code is doable, it can be tedious.

Enter CSS's Shadowy Technique

An effortless alternative involves layering a dark background image over your button using background-image. This approach preserves the button's text color while only affecting the background:

.button {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  font-size: 20px;
  background-color: red;
}

.button:hover {
  background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}

This adds a 40% opacity black linear gradient on top of the button, effectively darkening it on hover. The resulting code:

<div class="button"> some text </div>
<div class="button">

So, next time you need to darken a button's background on hover, embrace CSS's shadow-casting capabilities for a lightweight and customizable solution.

The above is the detailed content of How Can I Darken Buttons on Hover Using CSS?. For more information, please follow other related articles on the PHP Chinese website!