按钮Hover时Transition不生效但其他样式变更正常的问题

核心原因：inline元素不支持transform属性 #

你的按钮是<a>标签，默认属于inline元素，而CSS的transform属性（包括scale()方法）对inline元素是无效的。这就是hover时文本颜色能正常变化，但缩放效果完全没反应的关键原因——颜色是inline元素支持的样式属性，但transform不属于这个范畴。

解决方案：修改按钮的display属性 #

给.btn类添加display: inline-block（或block，根据页面布局需求调整），让元素成为可以应用transform的块级/行内块级元素：

.btn {
  border: 2px solid;
  border-radius: 20px;
  font-weight: bold;
  font-size: 14px;
  font-family: Gotham, Arial, sans-serif;
  text-decoration: none !important;
  text-shadow: none;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  text-transform: uppercase;
  min-height: 35px;
  padding: 8px 15px 5px 15px;
  line-height: 35px;
  cursor: pointer;
  transition: transform .2s;
  /* 添加该行使元素支持transform */
  display: inline-block;
}

.btn-default {
  border-color: #006c9d;
  color: #ffffff;
  background-color: #006c9d;
}

.btn-default:hover {
  transform: scale(1.05);
}

额外排查方向（若上述方案无效） #

• 检查CSS优先级冲突：在DevTools的Elements面板中，查看.btn-default:hover的transform属性是否被划掉。如果是，说明存在更高优先级的选择器（如带ID的选择器、标记了!important的规则）覆盖了当前样式，需要调整选择器权重。
• 父元素overflow设置：如果包裹按钮的父元素（比如示例中的<p>标签）设置了overflow: hidden，可能会裁剪缩放后的按钮区域，但这种情况通常能看到部分缩放效果，而非完全无反应。
• 全局样式重置干扰：部分框架或全局CSS会给元素强制设置transform: none !important，可以在DevTools中搜索这类规则确认是否存在。

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