在 box-shadow 属性上禁用 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 和 #9e2a2b 颜色属性始终可见并禁用其 transition。但是:hoverbox-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>