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

Et si vous changez votre fichier de style (.css) pour utiliser SASS (.scss) :

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