How to style the disabled button using CSS

In this tutorial, we are going to learn about how to style the disabled (html) button using the css.

Consider, we have a html button with the disabled attribute:

<button disabled="true" class="login">Login</button>

Styling the disabled button

To style the disabled button, we can use the :disabled pseudo-class selector in css.

Here is an example, that sets the background, font color to the disabled button:

.login:disabled{
   background:  #fff;
   color: #ccc;
   cursor: no-drop;
}

If you are using input element as a button then you can add the disabled styles like this:

input[type="text"]:disabled{
   background:  #fff;
   color: #ccc;
   cursor: no-drop;
}