Formulare mit HTML und CSS

Button-Zustände verstehen und formatieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Buttons haben verschiedene Zustände, die sich einzeln formatieren lassen. Neben :hover gibt es auch :active:focus für den geklickten Button.

Transkript

Bei Buttons kann man die verschiedenen Zustände formatieren. Wie das geht, sehen wir uns anhand eines Beispiels an. das von der Gestaltung für Buttons bei Bootstrap inspiriert ist. Da sind die Buttons ganz einfach. Wir haben aber auch verschiedene Zustände. Unser Beispiel sieht so aus, also ganz ähnlich, der Button. Es gibt auch einen Hover-Effekt. Dann gibt es einen Effekt, während ich draufklicke und nachdem ich das verlasse. Da ändert sich die Randfarbe, die ich in deutlichen Farben gestaltet habe, damit wir genau sehen, was passiert. Später ist es natürlich eleganter, das diskreter zu machen. Kommen wir zum Beispiel. Was brauchen wir dafür? Wir brauchen einen Button dafür. Wir können das machen über input type="submit". Wir können aber auch ein Button-Element nehmen mit type="submit", was ich in dem Beispiel mache. Außerdem hat es eine Klasse, worüber ich das Element ansprechen kann. Beim Button sind erst einmal ein paar grundlegende Sachen festgelegt wie die Schriftgröße, die Farbe, die Hintergrundfarbe. Außerdem ist Padding definiert, damit das Ganze größer wird. Wichtig, und sehr praktisch bei Buttons, ist display: inline-block. Damit kann man Buttons neben anderen Elementen anordnen. Trotzdem funktioniert Padding weiterhin. Wenn man hingegen display: inline macht, dann würde Padding nicht so funktionieren, wie es soll. Außerdem wird der Text zentriert. und es gibt cursor: pointer, damit der richtige Cursor angezeigt wird. Dann gibt es ein paar Sachen, die ganz praktisch sind. Es kann eine kleine Verzögerung geben, gerade auf mobilen Geräten, wenn man auf einen Button klickt. Das lässt sich entfernen über dieses touch-action. Außerdem sorgen wir über diese Angaben dafür, dass der Text nicht auswählbar ist. Das ist auch gut für die Usability. Es gibt einen Rahmen und eine abgerundete Ecke. Wenn man über den Button mit der Maus fährt, soll sich die Hintergrundfarbe und die Rahmenfarbe ändern. Dafür nehme ich den Hover-Zustand. Jetzt kommt das Entscheidende. Es gibt außerdem einen Fokuszustand und den Zustand, wenn der Button wirklich angeklickt ist. Dieser Zustand, wenn der Button angeklickt ist, ist active:focus. Dann soll nämlich der Rand blau sein. Sonst ist er rot. Das schauen wir uns ganz kurz an. Wenn ich jetzt hier draufklicke, das ist dieses focus active. Dann haben wir den Rand blau. Wenn ich das wieder loslasse, haben wir nur den Fokuszustand mit dem roten Rand. Außerdem gibt es, wenn man draufklickt, einen kleinen Schatten. Sehen wir uns den nochmal an. Oben sieht man etwas undeutlich, ich werde den mal etwas kräftiger machen, indem wir den nicht so durchsichtig machen und außerdem die Farbe ändern, damit wir deutlich sehen, was da mit dem kleinen Schatten eigentlich geschieht. Da sieht man, das ist dieser Schatten und er bewirkt, dass man das Gefühl hat, es wird etwas reingedrückt. Den kann ich jetzt natürlich wieder auf den diskreteren Wert setzen. An diesem kleinen Beispiel haben Sie gesehen, wie man Buttons gestaltet. Dafür gibt es nützliche Sachen wie dieses user-select: none. Die sind wichtig für die Usability. Außerdem ist wichtig, dass Sie wissen, dass Sie den geklickten Zustand des Buttons über active focus formatieren. Wenn man einen schönen Effekt haben möchte, dass es wirklich ein bisschen wie geklickt wirkt, dann kann man das über Box Shadow erreichen.

Formulare mit HTML und CSS

Lernen Sie Formulare mit HTML zu erstellen und wie die Formatierung von Formularen und die responsive Anordnung der Felder vonstatten geht.

1 Std. 16 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!