Schaltflächen sind ein wesentlicher Bestandteil vieler Websites und Anwendungen. Sie werden verwendet, um Benutzerinteraktionen durchzuführen und die Aufmerksamkeit des Benutzers zu erregen. Eine Möglichkeit, eine Schaltfläche interessanter und attraktiver zu machen, besteht darin, die Farbe beim Schweben oder Klicken zu ändern. In diesem Artikel betrachten wir drei einfache Möglichkeiten, diese Funktion mit CSS zu implementieren.
Die erste Methode besteht darin, die Pseudoklassen :hover und :active zu verwenden. Die Pseudoklasse :Hover wird angewendet, wenn der Mauszeiger über eine Schaltfläche bewegt wird. Wir können die Hintergrundfarbe und die Textfarbe der Schaltfläche ändern, indem wir den Eigenschaften background-color und color neue Werte zuweisen. Wenn eine Schaltfläche angeklickt wird, wird die Pseudoklasse :active angewendet. Wir können auch die Hintergrundfarbe und die Textfarbe für diesen Zustand ändern.
Der zweite Weg ist die Verwendung von CSS-Variablen. Wir können Variablen für die Farben deklarieren, die wir für die Schaltfläche verwenden möchten, und sie dann in allen erforderlichen Eigenschaften verwenden. Dann können wir zwei verschiedene Stilregeln für Pseudoklassen erstellen :hover und :active, und die Werte der Variablen auf diese Zustände anwenden. Mit dieser Methode können Sie die Farben der Schaltfläche einfach ändern, indem Sie die Variablenwerte ändern.
Der dritte Weg ist die Verwendung von Übergängen und Animationen. Wir können die transition-Eigenschaft verwenden, um beim Schweben oder Klicken nahtlos von einer Farbe zur nächsten zu wechseln. Wir können auch die Animationseigenschaft verwenden, um komplexere Animationen zu erstellen, um die Farbe einer Schaltfläche zu ändern. Durch die Einstellung der Dauer und anderer Animationsparameter können wir verschiedene Effekte erzielen.
Ändern Sie die Farbe der Schaltfläche in CSS: 3 Möglichkeiten
Schaltflächen mit sich ändernden Farben können Ihrer Website Interesse und Dynamik verleihen. Es gibt mehrere Möglichkeiten, diesen Effekt in CSS zu erzielen, im Folgenden sind die drei gängigsten Methoden aufgeführt:
-
Verwenden der Pseudoklasse :hover, um die Farbe einer Schaltfläche zu ändern, wenn Sie darauf zeigen: Beispielcode:
.button:hover
.button .button:hover
const button = document.querySelector('.button');button.addEventListener('click', function() );Wählen Sie die für Ihre Situation am besten geeignete Methode, um die Farbe der Schaltfläche zu ändern, und genießen Sie das Ergebnis!
Verwenden der CSS-Klasse
Um beispielsweise eine Klasse mit dem Namen "button-red" und der Schaltflächenfarbe rot zu erstellen, könnte der Code folgendermaßen aussehen:
.button-red
Weisen Sie diese Klasse dann mithilfe eines Attributs einer Schaltfläche zu . Zum Beispiel:
Die Schaltfläche hat jetzt einen roten Hintergrund, da die CSS-Klasse "button-red" angewendet wurde. Sie können bei Bedarf Klassen mit verschiedenen Farben erstellen und sie auf verschiedene Schaltflächenelemente anwenden.
Verwenden der Pseudoklasse :hover
Um eine farbverändernde Schaltfläche mit der Pseudoklasse :hover zu erstellen, müssen Sie zwei verschiedene Schaltflächenfarben festlegen: eine Farbe für den normalen Schaltflächenzustand und eine andere Farbe für den Schwebezustand.
.button .button:hover
In diesem Beispiel wird die Schaltfläche im normalen Zustand rot und grün angezeigt, wenn Sie über die Schaltfläche schweben.
Die Pseudoklasse :Hover kann für verschiedene Webdesigneffekte verwendet werden, z. B. das Ändern der Farbe, Größe oder des Stils eines Elements, wenn der Mauszeiger darüber bewegt wird. Es ermöglicht Ihnen, interaktive Elemente auf einer Webseite zu erstellen und ihre Benutzerverfügbarkeit zu verbessern.
Die Verwendung einer Pseudoklasse :Hover ist eine der einfachsten Möglichkeiten, Schaltflächen und anderen Elementen auf einer Webseite Interaktivität hinzuzufügen. Es ermöglicht Ihnen, stilvolle und auffällige Schaltflächen zu erstellen, die die Aufmerksamkeit der Benutzer auf sich ziehen und die Benutzererfahrung verbessern.
