按钮hover状态背景色不切换及侧边栏背景复用问题咨询

1. 核心问题：按钮hover背景色无变化修复 #

按钮原样式用了background复合属性（包含线性渐变），而hover状态仅设置background-color——CSS优先级规则里，background会覆盖单独的background-color，哪怕加了!important也无效。

修复方法：把hover状态的background-color改成background，直接覆盖原有渐变背景：

aside button:hover {
  color: black;
  background: #ddd;
}

如果不想用!important，可以提升选择器优先级，比如写成aside button.btn-toggle:hover。

2. 次要问题：按钮复用aside的背景渐变样式 #

重复写渐变代码冗余且难维护，推荐用**CSS自定义属性（变量）**抽离共用样式，实现复用：

步骤1：在aside中定义渐变变量 #

拆分aside的背景属性，把渐变单独存成变量，背景图单独设置：

aside {
  /* 新增渐变变量 */
  --aside-gradient: linear-gradient(357deg, rgba(106, 36, 108, 1) 5%, rgba(57, 26, 84, 1) 100%);
  background: var(--aside-gradient);
  /* 单独设置背景图相关属性 */
  background-image: url(../Imagenes/Logo.png);
  background-size: 80%;
  background-position: top 10px;
  background-repeat: no-repeat;
  /* 保留其他原有属性 */
}

步骤2：按钮直接引用变量 #

替换按钮里重复的渐变代码，直接用变量：

aside button {
  background: var(--aside-gradient);
  /* 保留其他原有属性 */
}

后续修改渐变样式时，只需调整aside里的变量值，按钮会自动同步。

修改后的完整代码 #

CSS代码

aside {
  font-family: Anderson;
  width: 15%;
  --aside-gradient: linear-gradient(357deg, rgba(106, 36, 108, 1) 5%, rgba(57, 26, 84, 1) 100%);
  background: var(--aside-gradient);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background-image: url(../Imagenes/Logo.png);
  background-size: 80%;
  background-position: top 10px;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

aside a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 26px;
}

aside a:hover {
  background-color: #ddd;
  color: black;
}

aside a.active {
  color: white;
  text-decoration: dotted;
  background: rgb(106, 36, 108);
}

aside button {
  font-family: Anderson;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 26px;
  background: var(--aside-gradient);
  border-style: none;
  cursor: pointer;
}

aside button:hover {
  color: black;
  background: #ddd;
}

HTML代码

<aside>
  <p></p>
  <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
  <a href="Formulario.html"><i class="fa fa-wpforms"></i>&nbsp;&nbsp;Account</a>
  <button class="btn-toggle"><i class="fa fa-fw fa-home darkmode"></i> Light Mode</button>
  <a href="#"><i class="fa fa-fw fa-home"></i> About us</a>
</aside>

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