Trick # 521 | Dieser Beitrag beinhaltet 882 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.
Mit dem HTML-Element <button> können Sie ganz einfach Schaltflächen erstellen. Mit der Zugabe von noch ein wenig CSS-Code, werden die Buttons überdies richtig schmuck. Drei Gestaltungsmöglichkeiten zeigen wir Ihnen in diesem Beitrag.
:hover
Fangen wir mit dem Hover-Effekt an. Der Button wechselt – wenn der Mauszeiger darüber bewegt wird – seine Farbe. Das geschieht mit ein wenig CSS-Code, den Sie in das CSS-Stylesheet (unter Design/Customizer/Zusätzliches CSS) einfügen:
button {
color: #ffffff;
background-color: #293280;
}
button:hover {
background-color: #59B14B;
}Der Code nebenan ergibt folgenden Effekt. Bewegen Sie den Mauszeiger über den Button:
:focus
Dieser Effekt wird seltener eingesetzt. Er zeigt sich bei den Tastaturaffinen UserInnen. Der CSS-Code spricht das gerade aktivierte Element an. Den CSS-Code kopieren Sie in das CSS-Stylesheet – im WordPress-Backend etwa unter Design/Customizer/Zusätzliches CSS:
button {
color: #ffffff;
background-color: #293280;
}
button:focus {
outline: 2px solid #293280;
outline-offset: 2px;
}Der Code nebenan ergibt folgenden Effekt. Klicken Sie mit der Maus erst in diesen Text und drücken Sie dann die Tab-Taste um die Wirkung zu sehen.
:enabled und :disabled
Der Button lässt sich aber auch deaktivieren und wird dann anders dargestellt. Etwa, wenn dem Button noch keine Funktion zugewiesen wurde, diese aber später folgen soll. Auch dieser CSS-Code kommt ins CSS-Stylesheet. Wenn Sie mit WordPress arbeiten, fügen Sie ihn unter Design/Customizer/Zusätzliches CSS ein:
button:enabled {
color: #ffffff;
background-color: #293280;
}
button:disabled {
background-color: darkgrey;
}Der Code nebenan ergibt folgenden Effekt:
Der obere Button hat den HTML-Code <button enabled>Lorem Ipsum Dolor</button> und der untere <button disabled>Sit Amet Consetetur</button>.
Keine Rocket-Science. Nicht wahr?
Werbung
Werbung
