禁用按钮时如何使按钮模糊答案

【问题标题】：How to make button blur when button is disabled禁用按钮时如何使按钮模糊
【发布时间】：2021-01-27 13:52:33
【问题描述】：

当它被禁用时如何使按钮模糊。

有什么办法吗？

<button (click)="addRow()" class="add-row-btn" mat-button [disabled]="isDisabled"> Add Row</button>

【问题讨论】：

【解决方案1】：

您可以在按钮类上使用 :disabled 选择器，如下所示：

HTML

 <button class="add-row-btn" disabled="disabled" onclick="addRow()"> Add Row</button>

CSS

.add-row-btn:disabled {
  background-color:orangered;
}

【讨论】：

【解决方案2】：

点击我！

button:disabled {
   background: #222;
   color: #fff;
   font-weight: 900;
   padding: 15px 30px;
   border-radius: 5px;
   filter: blur(2px);
}

【讨论】：

【解决方案3】：

您可以使用 css 实现此目的：

button[disabled] {
  filter: blur(2px);
}

Enabled button:
<button>Button</button>
<hr/>
Disabled button:
<button disabled="disabled">Button</button>

【讨论】：