Style disabled button with CSS

Question

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    Change the background-color of the button when it is disabled Change the image in the button when it is disabled  Disable the hover effect when disabled When you click on the image in the button and drag it  the image can be seen separately  I want to avoid that 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

User · Accepted Answer

For the disabled buttons you can use the :disabled pseudo-element. It works for all the 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:

How to disable text selection highlighting?

Example for the disabled selector:

_x000D_

button {_x000D_
  border: 1px solid #0066cc;_x000D_
  background-color: #0099cc;_x000D_
  color: #ffffff;_x000D_
  padding: 5px 10px;_x000D_
}_x000D_
_x000D_
button:hover {_x000D_
  border: 1px solid #0099cc;_x000D_
  background-color: #00aacc;_x000D_
  color: #ffffff;_x000D_
  padding: 5px 10px;_x000D_
}_x000D_
_x000D_
button:disabled,_x000D_
button[disabled]{_x000D_
  border: 1px solid #999999;_x000D_
  background-color: #cccccc;_x000D_
  color: #666666;_x000D_
}_x000D_
_x000D_
div {_x000D_
  padding: 5px 10px;_x000D_
}

_x000D_

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

_x000D_

User · Answer

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

User · Answer

And if you change your style   css  file to SASS   scss  use  button     background-color   007700     amp  disabled       background-color   cccccc

User · Answer

input type  button   disabled  input type  submit   disabled  input type  reset   disabled          apply css here what u like it will definitely work

User · Answer

I think you should be able to select a disabled button using the following   button disabled disabled   button disabled          your css rules

User · Answer

For all of us using bootstrap  you can change the style by adding the  disabled  class and using the following   HTML   lt button type  button class  btn disabled  gt Text lt  button gt    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    lt button type  button class  btn disabled  disabled  disabled  gt Text lt  button gt    A working fiddle with some examples is available here

User · Answer

Add the below code in your page  Trust me  no changes made to button events  to disable enable button simply add remove the button class in Javascript      Method 1    lt asp Button ID  btnSave  CssClass  disabledContent  runat  server    gt    lt style type  text css  gt       disabledContent                cursor  not-allowed          background-color  rgb 229  229  229   important              disabledContent  gt                   pointer-events none         lt  style gt    Method 2   lt asp Button ID  btnSubmit  CssClass  btn-disable  runat  server    gt    lt style type  text css  gt       btn-disable                   cursor  not-allowed          pointer-events  none             Button disabled - CSS color class           color   c0c0c0          background-color   ffffff              lt  style gt

User · Answer

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

User · Answer

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

User · Answer

consider the following solution   disable-button     pointer-events  none     background-color   edf1f2

User · Answer

Need to apply css as belows   button disabled button disabled       background-color   cccccc      cursor not-allowed  important

[css] Style disabled button with CSS

Examples related to css