在框阴影属性上禁用CSS过渡

Question

是否可以禁用按钮上box-shadow属性的转换，并同时针对不同的属性值启用它？

我有CSS：

#btn-more {
  padding: 6px 28px;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 1px;
  color: #c6ca53;
  background: #9e2a2b;
  border: 1px solid #c6ca53;
  box-shadow: 0 0 0 2px #9e2a2b;
  transition-duration: .3s;
}

#btn-more:hover {
  box-shadow: 22px 22px 0px 0px rgba(172, 76, 51, 0.5), 0 0 0 2px #9e2a2b;
}

<button id="btn-more">More</button>

因此，显然我希望具有box-shadow color属性的#9e2a2b始终可见，并禁用其transition。但是:hover box-shadow仍应在:hover上进行过渡。

试图实现this solution，但是没有运气。有什么办法解决吗？

Answer 1

在:hover状态下切换阴影的顺序，初始阴影将保持不变：

#btn-more {
  padding: 6px 28px;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 1px;
  color: #c6ca53;
  background: #9e2a2b;
  border: 1px solid #c6ca53;
  box-shadow: 0 0 0 2px #9e2a2b;
  transition-duration: .3s;
}

#btn-more:hover {
  box-shadow: 0 0 0 2px #9e2a2b, 22px 22px 0px 0px rgba(172, 76, 51, 0.5);
}

<button id="btn-more">More</button>