如何使用CSS在悬停时使按钮的背景颜色更暗 [英] How to make button background-color a little darker on hover using CSS

问题描述

在我的应用程序中，我的React项目中的按钮具有以下CSS代码:

In my application, I have the following css code for a button in my React Project:

.Button {
  background-color: #somehex;
}

当用户将鼠标悬停在按钮上时，我希望背景颜色略深一些.我曾尝试更改不透明度，但这种方法不起作用，目前正以这种方式进行:

When the user hovers over the button, I want the background color to be a little darker. I have tried changing opacity, which didnt work, and currently am doing it this way:

.Button:hover {
    transition: 0.2s ease-in;
    background-color:  #ALittleDarkerHex;
}

尽管此过程有效，但确实很乏味，因为我必须手动查找要使用的颜色的较暗版本.我想知道是否有更简单的方法可以使用CSS来加深按钮的背景颜色.

While this process works, it is really tedious because I have to manually look for a darker version of the color I am working with. I was wondering if there was an easier way to darken the background color of a button using CSS.

推荐答案

使用 background-image

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

.button:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0 0);
}

<div class="button"> some text </div>
<div class="button" style="background-color:lightblue;"> some text </div>
<div class="button" style="background-color:green;"> some text </div>
<div class="button" style="background-color:grey;"> some text </div>

要进行过渡:

.button {
  display: inline-block;
  color:#fff;
  padding: 10px 20px;
  font-size: 20px;
  background: linear-gradient(transparent,rgba(0, 0, 0, 0.4)) top/100% 800%;
  background-color:red;
  transition:0.5s;
}

.button:hover {
  background-position:bottom;
}

<div class="button"> some text </div>
<div class="button" style="background-color:lightblue;"> some text </div>
<div class="button" style="background-color:green;"> some text </div>
<div class="button" style="background-color:grey;"> some text </div>

带有混合混合模式的另一个想法:

Another idea with mix-blend-mode:

.button {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  font-size: 20px;
  background-color: red;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0 0);
  background-blend-mode: lighten;
}

.button:hover {
  background-blend-mode: darken;
}

<div class="button"> some text </div>
<div class="button" style="background-color:lightblue;"> some text </div>
<div class="button" style="background-color:green;"> some text </div>
<div class="button" style="background-color:grey;"> some text </div>

这篇关于如何使用CSS在悬停时使按钮的背景颜色更暗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！