html - 悬停时的相对背景颜色

Question

我有一个简单的 html 代码，如下所示：

button {
  position: absolute;
  font-size: x-large;
  border-radius: 25px;
  width: 140px;
  height: 50px;
  margin: 5px;
  color: white;
  border: none;
  cursor: pointer;
}

#home-btn {
  background: orange;
}

#panel-btn {
  background: yellowgreen;
  right: 0;
}

<button title="home" id="home-btn" class="fa fa-home"></button>
<button title="panel" id="panel-btn" class="fa fa-key"></button>

如何将背景颜色设置为比默认背景颜色深的颜色？

这是一个来自我想要的页面的 gif：

抱歉英语不好。

标签： htmlcssbackground-color

Answer 1

您可以使用CSS 过滤器：

button {
  position: absolute;
  font-size: x-large;
  border-radius: 25px;
  width: 140px;
  height: 50px;
  margin: 5px;
  color: white;
  border: none;
  cursor: pointer;
  transition: filter .2s;
}

button:hover {
  filter: brightness(0.9);
}

#home-btn {
  background: orange;
}

#panel-btn {
  background: yellowgreen;
  right: 0;
}

<button title="home" id="home-btn" class="fa fa-home"></button>
<button title="panel" id="panel-btn" class="fa fa-key"></button>

从我在该 GIF 中看到的内容来看，您想要的可能是增加饱和度：

button {
  position: absolute;
  font-size: x-large;
  border-radius: 25px;
  width: 140px;
  height: 50px;
  margin: 5px;
  color: white;
  border: none;
  cursor: pointer;
  transition: filter .2s;
}

button:hover {
  filter: saturate(400%);
}

#home-btn {
  background: orange;
}

#panel-btn {
  background: yellowgreen;
  right: 0;
}

<button title="home" id="home-btn" class="fa fa-home"></button>
<button title="panel" id="panel-btn" class="fa fa-key"></button>