如何为按钮实现outline-offset的过渡动画效果？

问题核心是：默认状态下未设置outline和outline-offset的初始值，CSS无法对“从无到有”的属性变化执行过渡动画。要实现平滑过渡，需在按钮默认样式中定义初始outline属性，再通过hover伪类修改属性值。

修改后的完整代码如下：

CSS

.orange-button {
  width: 137px;
  height: 35px;
  background: #C09E50;
  color: #F7F7F5;
  border-radius: unset;
  border: unset;
  /* 初始outline设置为透明，保证视觉不可见但属性存在 */
  outline: 2px solid transparent;
  outline-offset: 0;
  /* 配置过渡动画：指定过渡属性、时长和缓动效果 */
  transition: outline-offset 0.3s ease, outline-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.orange-button:hover {
  color: white;
  background: #B18D3A;
  /* 修改outline颜色和偏移量 */
  outline-color: #C09E50;
  outline-offset: 2px;
}

HTML（无需修改）

<div class="button-container">
  <button class="orange-button" type="button">Zxxx</button>
</div>

关键细节说明： #

• 必须在默认样式中初始化outline的宽度、样式和颜色（透明），这样hover时只是修改颜色和偏移量，属于CSS支持过渡的属性变更。
• transition属性可以明确指定要过渡的属性（如示例中列出的4个属性），比用all更高效，避免不必要的属性过渡。
• hover伪类中无需重复定义outline的宽度和样式，仅修改需要变化的outline-color和outline-offset即可。

内容的提问来源于stack exchange，提问作者Thamer Alluqmani