我来帮你一步步搞定这两个按钮的问题：

1. 按钮:disabled属性无法正常工作 #

先排查几个常见的原因：

• 元素类型不对：如果你的按钮是用<div>这类非原生可禁用元素模拟的，原生:disabled伪类根本不会生效——只有<button>、<input>、<select>这类原生表单元素支持disabled属性，先确认你的按钮标签是否正确。
• 属性设置有误：检查HTML里有没有给按钮加disabled属性（比如<button class="smlbutton" disabled>）；如果是用JS动态设置的，看看代码是不是写错了（比如写成disable而非disabled），或者有没有其他代码意外移除了这个属性。
• 事件逻辑冲突：如果按钮绑定了点击事件，有没有在禁用状态下没阻止事件触发？比如即使加了disabled，但JS里没判断状态就执行逻辑，会让你误以为禁用没生效。

2. 禁用按钮样式恢复默认 #

这个问题很明确：你只定义了:enabled和:hover状态的样式，完全没写:disabled状态的CSS规则，浏览器自然会用自带的默认禁用样式。

咱们把CSS补全，给禁用状态加上和启用状态一致的基础样式，再调整成禁用该有的视觉效果：

.smlbutton:enabled {
  color: #fff;
  background-color: #1d60ff;
  height: 20px;
  width: 18px;
  padding: 0px;
  border: none 0px transparent;
  font-size: 7px;
  font-weight: lighter;
  -webkit-border-radius: 5px 20px 20px 20px;
  -moz-border-radius: 5px 20px 20px 20px;
  border-radius: 5px 20px 20px 20px;
}
.smlbutton:hover:enabled { /* 仅启用状态下触发hover效果 */
  color: #fff;
  background-color: #1d80ff; /* 补全你原hover样式的背景色值 */
}
.smlbutton:disabled {
  /* 继承启用状态的基础样式 */
  height: 20px;
  width: 18px;
  padding: 0px;
  border: none 0px transparent;
  font-size: 7px;
  font-weight: lighter;
  -webkit-border-radius: 5px 20px 20px 20px;
  -moz-border-radius: 5px 20px 20px 20px;
  border-radius: 5px 20px 20px 20px;
  /* 禁用状态专属样式 */
  color: #ccc;
  background-color: #999;
  cursor: not-allowed;
  opacity: 0.7;
}

另外建议把.smlbutton:hover改成.smlbutton:hover:enabled，这样禁用状态下鼠标hover不会触发样式变化，更符合用户预期。

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