使用 CSS :after 遮蔽 button:hover

Question

我正在尝试向我的按钮添加一堆不同颜色的 classes 并允许任意添加额外的 classes。所有这些都应该在悬停时变暗。为每种颜色编写 button.(color):hover 规则似乎很乏味，所以我这样写 :after 部分会变暗并覆盖按钮背景。

http://jsfiddle.net/kjpczL5w/1/

但是，我无法根据需要让 :after 部分适合按钮的文本及其背景。目前，它还对文本进行着色。这里的想法是删除添加新按钮元素或新按钮颜色 class 的任何繁琐部分，因此我想避免为每种颜色添加额外的 html 或额外的 css 规则.想法？

button {
    border: 0;
    padding: 1em;
    position: relative;
    cursor: pointer;
    background: none;
}
button:after {
    content: " ";
    transition: background-color .3s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
button:hover:after { background-color: rgba(0, 0, 0, 0.3); }
button.green { background-color: #6c842e; color: #ffffff; }
button.red { background-color: #ff4444; color: #ffffff; }

<button>Boop</button>
<button class="green">Boop</button>
<button class="red">Boop</button>

Answer 1

使用 box-shadows 怎么样？

button {
  border: 0;
  padding: 1em;
  position: relative;
  cursor: pointer;
  background: none;
}
button:hover {
  box-shadow: inset 0 0 0 50px rgba(0, 0, 0, 0.2);
}
button.green {
  background-color: #6c842e;
  color: #ffffff;
}

<button>Boop</button>
<button class="green">Boop</button>

使用 CSS :after 遮蔽 button:hover

Using CSS :after to shade a button:hover

css

button