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

Question

禁用时如何使按钮模糊。

有什么办法吗？

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

Answer 1

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

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

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

Answer 2

点我！

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

Answer 3

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

HTML

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

CSS

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