Botón de estilo deshabilitado con CSS

Estoy tratando de cambiar el estilo de un botón con una imagen incrustada como se ve en el siguiente violín:

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

En el ejemplo no hay imágenes, me temo.

Estoy tratando de:

1. Cambie el background-colorbotón cuando está deshabilitado
2. Cambia la imagen en el botón cuando está desactivado
3. Deshabilita el efecto de desplazamiento cuando está deshabilitado
4. Cuando hace clic en la imagen en el botón y la arrastra, la imagen se puede ver por separado; Quiero evitar eso
5. Se puede seleccionar el texto en el botón. Quiero evitar eso también.

Traté de hacerlo button[disabled]. Pero algunos efectos no se pudieron desactivar. Me gusta top: 1px; position: relative;e imagen.

Para los botones deshabilitados puede usar el :disabledpseudo-elemento. Funciona para todos los elementos.

Para los navegadores / dispositivos que solo admiten CSS2, puede usar el [disabled]selector.

Al igual que con la imagen, no coloque una imagen en el botón. Use CSS background-imagecon background-positiony background-repeat. De esa manera, no se producirá el arrastre de la imagen.

Problema de selección: aquí hay un enlace a la pregunta específica:

• ¿Cómo deshabilitar el resaltado de selección de texto?

Ejemplo para el selector deshabilitado:

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>

Creo que debería poder seleccionar un botón deshabilitado utilizando lo siguiente:

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

Agregue el siguiente código en su página. Confía en mí, no se realizan cambios en los eventos de botón, para deshabilitar / habilitar el botón simplemente agrega / elimina la clase de botón en Javascript.

Método 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>

Método 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>

Para aplicar CSS de botón gris para un botón deshabilitado.

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

Por CSS:

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

Luego puedes agregar cualquier decoración a ese botón. Para cambiar el estado, puede usar jquery

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

Para todos los que usamos bootstrap, puede cambiar el estilo agregando la clase "deshabilitada" y usando lo siguiente:

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

Recuerde que agregar la clase "deshabilitado" no necesariamente deshabilita el botón, por ejemplo, en un formulario de envío. Para deshabilitar su comportamiento, use la propiedad deshabilitada:

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

Un violín de trabajo con algunos ejemplos está disponible aquí .

Cuando su botón está desactivado, establece directamente la opacidad. Entonces, antes que nada tenemos que establecer su opacidad como

.v-button{
    opacity:1;    
}

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

considere la siguiente solución

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

Y si cambias al uso de scss:

button {
  backgroud-color: #007700
  &:disabled {
    backgroud-color: #cccccc
  }
}

Necesita aplicar css como se muestra a continuación:

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