Krishna Thota
Krishna Thota

Reputation: 7056

Style disabled button with CSS

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.

Upvotes: 438

Views: 1465066

Answers (14)

joniking7777
joniking7777

Reputation: 11

Found this solution

Button{

&:disabled{

Opacity:0.8;
}
}

Upvotes: 1

Neha Jain
Neha Jain

Reputation: 269

To make button disable dynamically, we can add this -

css -

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

HTML-

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

Upvotes: 4

beerwin
beerwin

Reputation: 10327

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>

Upvotes: 647

Hamada
Hamada

Reputation: 1898

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
}

Upvotes: 0

Tamilselvan K
Tamilselvan K

Reputation: 1221

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>

Upvotes: 53

Akostha
Akostha

Reputation: 739

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

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

Upvotes: 1

Sahil Ralkar
Sahil Ralkar

Reputation: 2404

consider the following solution

.disable-button{ 
  pointer-events: none; 
  background-color: #edf1f2;
}

Upvotes: 8

Nagnath Mungade
Nagnath Mungade

Reputation: 1009

Need to apply css as belows:

button:disabled,button[disabled]{
    background-color: #cccccc;
    cursor:not-allowed !important;
  }

Upvotes: 4

Alvargon
Alvargon

Reputation: 372

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');

Upvotes: 14

c-chavez
c-chavez

Reputation: 7506

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.

Upvotes: 8

kushal Baldev
kushal Baldev

Reputation: 769

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;    
}

Upvotes: 5

ngrashia
ngrashia

Reputation: 9904

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;
}

Upvotes: 11

Chetan
Chetan

Reputation: 29

input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
  //  apply css here what u like it will definitely work...
}

Upvotes: 2

Billy Moat
Billy Moat

Reputation: 21050

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

button[disabled=disabled], button:disabled {
    // your css rules
}

Upvotes: 121

Related Questions