Stil deaktivierte Schaltfläche mit CSS

Question

Ich versuche, den Stil eines Buttons mit eingebettetem Bild zu ändern, wie im folgenden Fiddle zu sehen:

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

In dem Beispiel sind leider keine Bilder vorhanden.

Ich versuche:

1. Die Hintergrundfarbe des Buttons zu ändern, wenn er deaktiviert ist
2. Das Bild im Button zu ändern, wenn er deaktiviert ist
3. Den Hover-Effekt bei Deaktivierung zu deaktivieren
4. Wenn Sie auf das Bild im Button klicken und es ziehen, kann das Bild separat gesehen werden; das möchte ich vermeiden
5. Der Text auf dem Button kann ausgewählt werden. Das möchte ich auch vermeiden.

Ich habe versucht, es mit button[disabled] zu machen. Aber einige Effekte konnten nicht deaktiviert werden, wie top: 1px; position: relative; und das Bild.

Answer 1

Und wenn Sie Ihre Style (.css) Datei zu SASS (.scss) ändern, verwenden Sie:

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

Answer 2

In Angular kannst du Buttons deaktivieren, indem du Werte im CSS für den Deaktivierungsstatus übergibst.

html

css

.button-action.disabled {
  // einige css
}