嘿，很高兴帮你梳理这个CSS简化的问题！你现在的写法确实存在重复代码，其实我们可以通过两个小技巧来优化，既避免重复写hover和非hover状态的过渡，还能精准控制应用范围~

核心优化思路 #

1. 把过渡写在默认状态，而非hover/非hover状态
   CSS的transition是双向生效的——只要在元素的初始状态定义过渡规则，当元素状态变化（比如从默认到hover，再从hover回到默认）时，浏览器会自动应用过渡效果，完全不需要分别给:hover和:not(:hover)写重复的过渡声明。

2. 提取公共样式，减少冗余代码
   你的两个按钮有大量相同的基础样式（布局、内边距、圆角、字体等），我们可以把这些公共样式抽成一个通用类，再给每个按钮保留专属的颜色、hover变化即可。

修改后的完整代码 #

HTML部分

给两个按钮都加上通用的.btn类：

<a class="btn downloadPdf" href="#">Download PDF</a>
<a class="btn supportBtn" href="#">Support</a>

CSS部分

/* 通用按钮基础样式（包含过渡规则） */
a.btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 15px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: rgb(0 0 0 / 15%) 0px 0px 6px -2px;
  /* 定义过渡：所有变化的属性都用0.2s过渡，也可以指定具体属性提升性能 */
  transition: all 0.2s ease;
}

/* 下载按钮专属默认样式 */
a.downloadPdf {
  background: #C8E6C9;
  color: #479C4B;
}

/* 下载按钮hover状态 */
a.downloadPdf:hover {
  background: #43A047;
  color: #fff;
  box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px 0px;
}

/* 支持按钮专属默认样式 */
a.supportBtn {
  background: #FBE9E7;
  color: #DF5242;
}

/* 支持按钮hover状态 */
a.supportBtn:hover {
  background: #F4511E;
  color: #fff;
  box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px 0px;
}

额外说明 #

• 如果想让过渡更精准（提升性能），可以把transition: all改成具体属性，比如：

  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  

• 选择器a.btn确保了只有带.btn类的<a>标签才会应用这些样式，完美符合你“指定仅应用于特定元素”的需求。如果你的按钮是<button>元素，只要把选择器改成button.btn就行。

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