Button Farbe

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ozanshakur

Neues Mitglied
15 März 2021
27
1
3
21
Hallo,

ich erstelle gerade ein Quiz und möchte das sich die Farbe von den buttons nach dem anklicken ändert. Ich dachte es geht wenn man in CSS den Code

#button::after{
background-color: red;

eingibt. Aber es ändert sich nichts?

Vielen Dank für Hilfe im vorraus!
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.174
247
63
20
Das ::after Pseudo-Element erlaubt es dir, Content nach dem Button einzufügen. Zum Beispiel einen Text.

Mit CSS ist es nicht möglich (nur mit hässlichen Workarounds), nach einem Klick des Buttons die Hintergrundfarbe zu verändern. Für so etwas wirst du JavaScript benutzen müssen.

Ohne dir zu Nahe treten zu wollen, aber ich glaube, dass du in Thema CSS (und ich schätze daher auch JavaScript) noch ein Anfänger bist. Das mache ich unter anderem daran fest, dass du #button schreibst, also einem Button die ID "button" zugeordnet hast, aber auch an deiner Frage die du gestellt hast.

Ich halte es daher noch nicht für Sinnvoll, dich direkt auf JavaScript zu stürzen. Wenn du unbedingt diese Hintergrundfarbveränderung brauchst, würde ich an deiner Stelle im Internet nach fertigen Snippets schauen, die du dir einfach rauskopieren kannst oder nimm einfach das hier erstmal:
HTML:
<button id="button" onclick="this.style.backgroundColor = 'red';">
    Dein Button
</button>

Hier gibt es im Übrigen eine Übersicht der wichtigsten Pseudo-Klassen und -Elemente:
 
  • Like
Reaktionen: Ozanshakur

Ozanshakur

Neues Mitglied
15 März 2021
27
1
3
21
Danke, bin eigentlich kein Anfänger habe auch Seiten online was natürlich nicht heißt das ich gut bin aber Anfänger kann man nicht wirklich sagen :)
 
Zuletzt bearbeitet:

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.174
247
63
20
Nun ja, wie ich bereits sagte, gibt es einige Workarounds. Eine weitere Möglichkeit wäre es, zum Beispiel eine unsichtbare Checkbox über deinem Element zu positionieren. Aber alle Workarounds bringen so ihre Nachteile.

Der große Nachteil bei deinem Workaround ist, dass auch nach einem Seitenrefresh das Element als :visited markiert ist. Dein Button funktioniert außerdem nur einmal, da er danach ja :visited ist. Ob diese Einschränkungen bei deinem Vorhaben kein Problem sind, musst du dann ja selber wissen :)
 
Zuletzt bearbeitet: