Wie man einen Text-Link-Blick wie ein abgeflachtes Button mit CSS

Ein Menü auf einer Webseite ist wirklich nichts anderes als eine Liste von Links. Die zugänglichste Art von Menü besteht aus Text, keine Bilder. Mit einigen CSS kann eine abgeschrägte Schaltfläche ein Text-Link aussehen. Hier sind die Schritte, um dieses Ziel zu erreichen.

Anweisungen

1

Beginnen Sie mit einer einfachen alten ungeordnete Liste im HTML-Code Ihrer Webseite. Der Liste eine Id zu geben.

2 In Ihrem CSS-Stylesheet müssen Sie mehrere Dinge, um die Liste abgeschrägten Tasten aussehen zu tun. Starten Sie durch die Liste selbst formatieren. Entfernen Sie die Kugeln und passen Sie die Ränder und Abstände um Ihr Design zu entsprechen.

NAV-Ul {} List-Style: none;Margin: 0;Padding: 0;Padding-Top: 1em;}

3 Wenn die Liste horizontal am oberen Rand der Webseite angezeigt werden soll, fügen Sie diese CSS-Regel zum Stylesheet:

NAV li {} Display: Inline;}

4 Weisen einige CSS-Formatierungsregeln für Color, background Farbe und Rahmen-Eigenschaften, die ein: Verbindung und ein: besucht Elemente. Die Hintergrundfarbe und die Grenzen werden ein aussehen wie ein abgeflachtes Button aus den Textlink erstellen.

Etwa wie folgt:

NAV a: Link, #nav ein: {besucht Farbe: #000;Hintergrundfarbe: #D6AE00;Border-Top: 1px solid #CCC;Rand rechts: 1px solid #666;Grenze-Boden: 1 px solid #666;linke Grenze: 1 px solid #CCC;}

5 Um eine Darstellung der Schaltfläche wird deprimiert im Hover-Status zu geben, einfach umkehren Sie die Rahmenfarben.

Etwa wie folgt:

NAV a: hover {} Border-Top: 1px solid #666;Rand rechts: 1px solid #CCC;Grenze-Boden: 1 px solid #CCC;linke Grenze: 1 px solid #666;}

6 Sie können experimentieren mit Farben, verwenden Sie ein Hintergrundbild, anstatt einfach eine Hintergrundfarbe und tun viele Dinge mit der Polsterung und die Platzierung dieses Menüs, aber Sie haben die Grundlagen der Erstellung der abgeschrägte Schaltfläche Illusion in CSS mit so viel Code.