Button Farbe

[Ozanshakur]

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]

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:

<button id="button" onclick="this.style.backgroundColor = 'red';">
    Dein Button
</button>

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

CSS Pseudo-classes

A CSS pseudo-class is a keyword that can be added to a selector, to define a style for a special state of an element.

www.w3schools.com

 

[Ozanshakur]

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 :)

 

[Aaron3219]

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 :)

Dann tut's mir leid ^^

Aber dann ist da auf jeden Fall noch Lernpotential

 

[Manuel Lemke]

https://www.w3schools.com/cssref/sel_visited.asp

a:visited {
color: pink;
}


Anfänger oder nicht ;-) .

 

[Aaron3219]

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 :)