Heute habe ich euch mal wieder ein Tutorial mitgebracht. Da ich mir lange überlegt habe, was ich denn so erlären könnte, bin ich zu dem Schluss gekommen: Ich erkläre euch wie man eine “Button-Navigation” mit einem schicken Rollover machen kann. Das ganze funktioniert mit CSS und ist total einfach!

So sollte das ganze aussehen, wenn es fertig ist:

photo credit: Aaron Landry

Schritt 1
Als erstes fügst du folgenden Code in deine CSS Datei ein. Du kannst ihn beliebig verändern und anpassen, denn alle Angaben sind nur Beispielangaben. Achte aber darauf, dass dieser Part erst nachdem Part kommt, in dem du die Links in deiner CSS angepasst hast.

Schritt 2
Nun öffne die Seite, wo deine Navigation sein soll.
Füge

in den Linkcode ein.
Das wiederrum könnte dann so aussehen, also sieht der a-Tag danach so aus

Tipp!
Du kannst verschiedene “Buttons” machen, in dem du den Code beliebig oft in deine CSS einfügst, achte aber darauf “nav” immer anders zu nennen, zB.: nav2, nav3 ….

Das war’s auch schon und es war doch wirklich nicht schwer oder? Fragen können wie immer per Kommentar gestellt werden