410

I'm trying to change the style of a button with an embedded image as seen in the following Fiddle:

http://jsfiddle.net/krishnathota/xzBaZ/1/

In the example there are no images, I'm afraid.

I'm trying to:

  1. Change the background-color of the button when it is disabled
  2. Change the image in the button when it is disabled
  3. Disable the hover effect when disabled
  4. When you click on the image in the button and drag it, the image can be seen separately; I want to avoid that
  5. The text on the button can be selected. I want to avoid that, too.

I tried doing in button[disabled]. But some effects could not be disabled. like top: 1px; position: relative; and image.

14 Answers 14

608

For the disabled buttons you can use the :disabled pseudo class. It works for all the elements that have a disabled API (typically form elements).

For browsers/devices supporting CSS2 only, you can use the [disabled] selector.

As with the image, don't put an image in the button. Use CSS background-image with background-position and background-repeat. That way, the image dragging will not occur.

Selection problem: here is a link to the specific question:

Example for the disabled selector:

button {
  border: 1px solid #0066cc;
  background-color: #0099cc;
  color: #ffffff;
  padding: 5px 10px;
}

button:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
  padding: 5px 10px;
}

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

div {
  padding: 5px 10px;
}
<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>

5
  • 1
    Applyable to CSS 2 or 3 (or both)? Sep 3, 2013 at 23:33
  • 3
    As far as i know, the :disabled selector is a CSS3 selector. The background-image, background-repeat, background-position are working in CSS 2.
    – beerwin
    Sep 4, 2013 at 6:45
  • 3
    So maybe doing a :disabled, [disabled] would work in CSS2 & 3? Sep 6, 2013 at 19:30
  • 7
    Just to note, the ="true" part of disabled="true" is not what is making it disabled. You could use disabled="false" or disabled="cat" and it would still be disabled. Or simply have disabled with no value. That property can only be present/omitted in Html, or added via JavaScript with true/false
    – Drenai
    Feb 26, 2018 at 13:00
  • 3
    :disabled is a pseudo class, not a pseudo element. There is only three pseudo elements: ::before, ::after, and newly added ::marker. You can easily tell one from the other because for pseudo elements they use :: as a prefix, for pseudo classes :. I'm correcting that mistake.
    – connexo
    Apr 7, 2021 at 19:53
113

I think you should be able to select a disabled button using the following:

button[disabled=disabled], button:disabled {
    // your css rules
}
2
  • Can I disable the Hover ?? and I heard that will not work in IE6 ? Feb 7, 2013 at 11:42
  • I don;t think you can but I'm not 100% sure. If you could also add a class of disabled onto disabled buttons then you could probably do it via that class.
    – Billy Moat
    Feb 7, 2013 at 11:51
51

Add the below code in your page. No changes made to button events, to disable/enable the button simply add/remove the button class in JavaScript.

Method 1

 <asp Button ID="btnSave" CssClass="disabledContent" runat="server" />

<style type="text/css">
    .disabledContent 
    {
        cursor: not-allowed;
        background-color: rgb(229, 229, 229) !important;
    }

    .disabledContent > * 
    {
        pointer-events:none;
    }
</style>

Method 2

<asp Button ID="btnSubmit" CssClass="btn-disable" runat="server" />

<style type="text/css">
    .btn-disable
        {
        cursor: not-allowed;
        pointer-events: none;

        /*Button disabled - CSS color class*/
        color: #c0c0c0;
        background-color: #ffffff;

        }
</style>
2
  • To feel button disabled add the below CSS code color: #c0c0c0; background-color: #ffffff; Feb 25, 2015 at 14:02
  • sorry but this button looks different but still can be clicked and triggers onclick event in my FireFox, so I don't get it
    – McVitas
    Oct 15, 2022 at 13:29
13

By CSS:

.disable{
   cursor: not-allowed;
   pointer-events: none;
}

Them you can add any decoration to that button. For change the status you can use jquery

$("#id").toggleClass('disable');
11

To apply grey button CSS for a disabled button.

button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
  background-color: #ddd;
  background: #ddd;
}
8

consider the following solution

.disable-button{ 
  pointer-events: none; 
  background-color: #edf1f2;
}
2
  • This solution will increase the weakness of the app/service that it is under building.
    – Franco Gil
    Feb 27, 2020 at 2:52
  • 1
    @FrancoGil you are right but this can be a way to achieve disable button Mar 3, 2020 at 5:07
7

For all of us using bootstrap, you can change the style by adding the "disabled" class and using the following:

HTML

<button type="button"class="btn disabled">Text</button>

CSS

.btn:disabled,
.btn.disabled{
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}
.btn:disabled:hover,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:focus {
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}

Remember that adding the "disabled" class doesn't necessarily disable the button, for example in a submit form. To disable its behaviour use the disabled property:

<button type="button"class="btn disabled" disabled="disabled">Text</button>

A working fiddle with some examples is available here.

5

When your button is disabled it directly sets the opacity. So first of all we have to set its opacity as

.v-button{
    opacity:1;    
}
4

Need to apply css as belows:

button:disabled,button[disabled]{
    background-color: #cccccc;
    cursor:not-allowed !important;
  }
2
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
  //  apply css here what u like it will definitely work...
}
1

And if you change your style (.css) file to SASS (.scss) use:

button {
  background-color: #007700;
  &:disabled {
    background-color: #cccccc;
  }
}
1

To make button disable dynamically, we can add this -

css -

button:disabled, button[disabled]{
  cursor: not-allowed;
}

HTML-

<button [disabled]="true"> Button name </button>
0

In Angular you can disable buttons by pass value in css for disable status.

html

<button
   [disabled]="true">
</button>

css

.button-action.disabled {
  // some css
}
0

Found this solution

Button{

&:disabled{

Opacity:0.8;
}
}
1
  • 1
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Aug 29 at 8:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.