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 · 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

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

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

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

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   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   lt div gt  x000D     lt button gt  This is a working button  lt  button gt  x000D   lt  div gt  x000D   x000D   lt div gt  x000D     lt button disabled gt  This is a disabled button  lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

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

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

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

User · Answer

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

[css] Style disabled button with CSS

Examples related to css