CSS按钮仅过渡background-color：解决hover/selected状态过渡范围过大问题

你的问题出在没有给transition指定具体过渡属性，默认情况下transition: linear 0.5s会对所有可过渡的CSS属性生效，包括border的显示状态变化，这就导致了非预期的过渡效果。

只需要明确指定需要过渡的属性即可，比如你需要的背景色、文字色，若hover时边框色也需要过渡也可一并添加：

.score-button {
  width: 35px;
  height: 35px;
  border: 1px solid var(--fill-button-text8);
  background-color: transparent;
  border-radius: 23px;
  color: var(--fill-button-text8);
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  // 仅指定需要平滑过渡的属性，避免无关样式产生过渡
  transition: background-color 0.5s linear, color 0.5s linear, border-color 0.5s linear;

  &:hover {
    background-color: var(--fill-button-bg-hover);
    // 若hover时需要同步变化边框色，可在此补充对应值
    // border-color: var(--your-hover-border-color);
  }

  &.selected {
    border: none;
    background-color: var(--primary-color);
    color: var(--fill-button-text);
  }
}

补充说明： #

• 如果不需要边框色的过渡，直接把border-color从transition属性中移除即可，此时.selected类里border: none的变化会立即生效，不会有过渡效果
• 过渡属性的排列顺序不影响效果，只要明确列出你需要平滑变化的属性就可以

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