HTML/CSS Button Funktioniert nicht richtig?

Hallo,

Ich habe einen RGB Knopf der auch wunderschön leuchtet:

Aber wenn ich auf ihn kliche, wirde der ganze hintergrund zu RGB. Hier der CSS Code:

https://pastebin.com/77rnPQLt

Wie kann ich das beheben?

MfG

Answer 1

[regex9]

Bei Klick auf das Element wird der active-Zustand ausgelöst. Das heißt, dieser Selektor:

.glow-on-hover:active {
  /* ... */
}

ist für dein Problem verantwortlich. Dieser positioniert das Element (deinen Button) in Richtung linker oberer Ecke des relativen Bezugselements (das ist das nächstliegende, explizit relativ positionierte Elternelement) und veranlasst auch, dass es die komplette Fläche von diesem einnimmt.

In deinem Fall ist wohl das Bezugselement der body-Tag (deswegen wird auch die komplette Fläche bunt). Einen Unterschied wirst du sehen, wenn du den Button einmal in einen anderen Container einsetzt:

<div style="position: relative;width: 100px;height: 50px">
  <div class="intro-text glow-on-hover">
    <p>Intro text</p>
  </div>
</div>