Aus dem Kurs: CSS: Responsive Flexbox-Layouts für Profis

Erhalten Sie Zugriff auf diesen Kurs – mit einer kostenlosen Probeversion

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 25.300 Kurse von Branchenfachleuten.

Interaktion: Buttons erstellen mit HTML und CSS

Interaktion: Buttons erstellen mit HTML und CSS – Tutorial zu CSS

Aus dem Kurs: CSS: Responsive Flexbox-Layouts für Profis

Interaktion: Buttons erstellen mit HTML und CSS

Der erste Schritt zum Integrieren dieser Interaktionen sind die Buttons hier oben, die im HTML eingebaut werden und das sieht im Editor im HTML so aus, dass hier ein "div" mit der Klasse "sidebar-switcher" eingebaut wurde und zwar im "Header", bevor hier der eigentliche "site-title" kommt: "<div class="sidebar-switcher"", dadrin der Text "Sidebar:" und dann drei Buttons. Diese drei Buttons haben jeweils eine Klasse und die entspricht dem, was sie später einmal tun werden, nämlich "sidebar-left-toggle", "sidebar-right-toggle" und "sidebar-hide-toogle". Also diese drei Buttons sind drei Schalter, um die Sidebar nach links zu bringen, nach rechts zu bringen oder um sie ein- bzw. auszublenden. Innerhalb dieser drei Buttons gibt es ein Icon Font "Font Awesome", das hier oben geladen wird, direkt aus dem Internet wie immer hier bei den Übungen und das ist "fa-align-left", Font Awesome linksbündig und dadrin "span" und ein bisschen Text für den Screenreader. Das Schema wiederholt sich…

Inhalt