Style du bouton désactivé avec CSS

Question

J'essaie de modifier le style d'un bouton avec une image intégrée, comme le montre le test suivant :

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

Dans l'exemple, il n'y a pas d'images, j'en ai peur.

J'essaie de le faire :

1. Changez le background-color du bouton lorsqu'il est désactivé
2. Modifier l'image du bouton lorsqu'il est désactivé
3. Désactiver l'effet de survol lorsqu'il est désactivé
4. Lorsque vous cliquez sur l'image dans le bouton et que vous la faites glisser, l'image est visible séparément ; je veux éviter cela.
5. Le texte du bouton peut être sélectionné. Je veux éviter cela aussi.

J'ai essayé de faire dans button[disabled] . Mais certains effets n'ont pas pu être désactivés, comme top: 1px; position: relative; et l'image.

Answer 1

Considérer la solution suivante

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

Answer 2

Pour tous ceux qui utilisent bootstrap, vous pouvez modifier le style en ajoutant la classe "disabled" et en utilisant ce qui suit :

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

N'oubliez pas que l'ajout de la classe "disabled" ne désactive pas nécessairement le bouton, par exemple dans un formulaire d'envoi. Pour désactiver son comportement, utilisez la propriété "disabled" :

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

Un violon d'Ingres avec quelques exemples est disponible aquí .

Answer 3

Lorsque votre bouton est désactivé, il définit directement l'opacité. Donc, tout d'abord, nous devons définir son opacité en tant que

.v-button{
    opacity:1;    
}

Answer 4

Il faut appliquer le css comme ci-dessous :

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

Answer 5

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