CSS - Links gestalten Teil 1

Einen Kommentar schreiben

Wie schon erwähnt kann man vieles mit CSS machen. Natürlich kann man auch Links damit gestalten und das in den unterschiedlichsten Formen und Farben.
Die Idee zu dem Artikel kam auf, als ich einer Arbeitskollegin beim gestalten ihrer Homepage zu sah, die noch nicht viel mit der Materie zu tun hatte. Im grossen und ganzen wurden Buttons, Überschriften und sonstige Elemente mit Grafiken gelöst. Eine Lösung, klar, aber vielleicht doch nicht die optimale, Suchmaschinen bekommen weniger zu lesen, die Seite wird unnötig gross und in Zeiten von mobilen Internetzugängen wird meiner Meinung nach Ladefreundlichkeit wieder wichtiger.
Widmen wir uns nun einigen gestaltungsmöglichkeiten für Links oder Buttons.
Eine Möglichkeit wäre zum Beispiel einen Windowsbutton in schlichten grau darzustellen. Hebt einen Link klar aus der Seite hervor und kann gut für Verweise auf Datein, Anmeldungsformulare oder ähnliches verwendet werden.
Die CSS Class nennen wir einfach "button". Damit es ein "echter" Button wird brauchen wir unbedingt die Anweisung "display: block", das führt dazu das man nicht mehr direkt auf die Schrift klicken muss sondern das ganze Element ein klickbarer Link wird. Mit "padding" geben wir an, wie gross der Aussenabstand zur Schrift sein muss, je mehr padding umso grösser wird die Schaltfläche. Als Hintergrundfarbe "background-color: #f2f2f2;" hab ich hier ein helles grau gewählt um den Windowsbutton effekt zu gestalten. Mit der weite "width: 350px;" wird die minimale breite der Schaltfläche festgelegt.
Für die Schriftfarbe "color: #000;" ein simples Schwarz mit keiner Text dekoration "text-decoration: none;".
Der simple Effekt der "reingedrückten" Schaltfläche gestalltet man rein mit denn Rändern "border", und zwar gestalten wir hier die einzelnen Ränder unterschiedlich. Ich habe mit Absicht keine Zusammenfassung von zwei Border gemacht, damit mit schön mit allen 4 Border ein experementieren kann.
In dem die Ränder einfach "umgedreht" werden und helle und dunkle Farben einfach getauscht werden erzielt man schnell und einfach diesen Effekt. Die gegenüber liegenden Border werden einfach umgedreht, genauso wie die Farben, das geschieht in der Classe "a.button:hover" und kann natürlich auch mit "a.button:active" ergänzt werden. Aber ab hier ist nun die eigene Fantasie und ein wenig probieren gefragt.

Windows ähnlicher Button mit reinem CSS gestaltet


	a.button {
		padding: 5px;
		text-align: center;
		display: block;
		background-color: #f2f2f2;
		border-top: 0px solid #000;
		border-left: 0px solid #000;
		border-bottom: 2px solid #6e6e6e;
		border-right: 2px solid #6e6e6e;
		color: #000;
		width: 350px;
		text-decoration: none;
	}
		
	a.button:link {
		display: block;
		background-color: #f2f2f2;
		border-top: 0px solid #000;
		border-left: 0px solid #000;
		border-bottom: 2px solid #6e6e6e;
		border-right: 2px solid #6e6e6e;
		color: #000;
		width: 350px;
		text-decoration: none;
	}
		
	a.button:hover {
		display: block;
		background-color: #e6e6e6;
		border-top: 1px solid #000;
		border-left: 1px solid #000;
		border-bottom: 0px solid #000;
		border-right: 0px solid #000;
		color: #000;
		width: 350px;
		font-style: bold; 
		text-decoration: none;
	}

Im Html Quelltext wird nun nur noch ein ganz normaler Link eingebaut und um die Classe "button" erweitert. Der Quelltext bleibt sauber, die Ladezeit klein und trotzdem hat man einen Effekt auf seiner Seite der noch dazu Suchmaschinen freundlich ist.

Der Html Link mit eingebauter Classe


<a href="#" class="button">meine Schaltfläche</a>

Möchte man nun nicht nur eine schlichte Farbe im Hintergrund sondern einen peppigen Button ist das auch kein Problem. Man erstelle einen Button in einem Grafikprogramm und beschriftet diesen nicht. Zum ersten wird die Grafik nun ladefreundlicher weil man für 5 Buttons nun keine 5 Grafiken(10 bei rollover effekt, 15 bei rollover und activ) sondern nur noch diese eine Grafik(oder 2 bei rollover und 3 bei rollover und active). Wie sich das bei z.B. 15 Buttons auswirkt man sich nun leicht ausrechnen.
Der Trick ist einfach das man die Background-color einfach gegen Background-image auswechselt.
Zusätzlich müssen natürlich die weite und die höhe im CSS angepasst werden sowie die Border ausgeschalten werden.

Grafischer Button mit CSS eingebunden


	a.button_grafik {
		padding-top: 16px;
		text-align: center;
		vertical-align:middle;
		display: block;
		background-image:url("css_grafiken/button.jpg");
		background-repeat: no-repeat;
		color: #000;
		width: 200px;
		height: 50px;
		text-decoration: none;
		font-size: 14px;
		font-weight:bold;
	}
		
	a.button_grafik:link {
		padding-top: 16px;
		text-align: center;
		vertical-align:middle;
		display: block;
		background-image:url("css_grafiken/button.jpg");
		background-repeat: no-repeat;
		color: #000;
		width: 200px;
		height: 50px;
		text-decoration: none;
		font-size: 14px;
		font-weight:bold;
	}
		
	a.button_grafik:hover {
		padding-top: 16px;
		text-align: center;
		vertical-align:middle;
		display: block;
		background-image:url("css_grafiken/button_hover.jpg");
		background-repeat: no-repeat;
		color: #000;
		width: 200px;
		height: 50px;
		text-decoration: none;
		font-size: 14px;
		font-weight:bold;
	}

Der Link wird in Html genauso eingebunden wie die Version ohne Grafik.

Der Html Link mit eingebauter Classe


<a href="#" class="button_grafik">meine Schaltfläche</a>

Und hier nun die einzelnen Beispiele in Funktion

Diesen Artikel verlinken:


<a href="http://www.pixelmania.at/css_links_gestalten.php" title="Mit CSS Links gestalten von pixelmania.at">Mit CSS Links gestalten von pixelmania.at</a>

rainer am 12.6.2008 | 21:16


freut mich das dir der artikel geholfen hat.

wie erwähnt, ist das der erste teil ;)

Micael am 7.6.2008 | 23:50


Hey, fetter Artikel. Ich hatte das auch bisher immer mit tausend Grafiken gemacht, aber so geht es ja um Längen einfacher und eleganter. Und am Ende is es auch noch übersichtlicher ;)

Hier kannst Du Deinen Kommentar zu diesem Artikel schreiben.