html - 按钮悬停颜色更改

Question

我创建了一个抽象类型的按钮(本来是一朵云，但变成了不同的东西!)

但现在我无法更改按钮中所有元素的悬停颜色 - 有人可以看到我在那部分做错了什么吗？

这是我用于按钮的代码，是我从我在此观看的各种教程中拼凑而成的。

.btn {
  position: relative;
  width: 150px;
  height: 50px;
  border-radius: 50%;
  background-color: #66b65d;
  transition: background-color 100ms linear, height 70ms ease-in, width 70ms ease-in;
  cursor: pointer;
  z-index: 999 !important;
}

.btn:before {
  content: "";
  display: block;
  width: 130px;
  height: 30px;
  position: absolute;
  top: 89;
  border-radius: inherit;
  background-color: #5ca754;
  ;
  z-index: -1 !important;
}

.btn:after {
  content: "";
  display: block;
  width: 130px;
  height: 30px;
  position: absolute;
  top: 89;
  border-radius: inherit;
  background-color: #508f49;
}

.btn:before {
  left: -10%;
  margin-left : calc( ( #{75)   );

}

.btn:after {
  right: 100%;
  margin-right : calc( ( #{25)   );

}

Answer 1

您可以使用相同的“悬停”属性:

.btn:hover,
.btn:hover:before,
.btn:hover:after {
    background-color: #886633;
}