How To: Hyperlink wie einen Button aussehen lassen und per CSS stylen

Hyperlinks sind essentielle Bestandteile von Webseiten. Nur sehen sie als reine Textlinks meistens nicht wirklich schön aus. Mit etwas CSS kann man so einen Link allerdings fast wie einen Button aussehen lassen und stylen.

Hier das HTML:

1	<a class="button" href="http://sample.org">Hyperlink</a>

Nun das CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

a.button {
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
background:none repeat scroll 0 0 #eee;
border:1px solid #999;
cursor:pointer;
padding:5px;
color:#000;
text-decoration:none;
}

a.button:hover {
text-decoration:none;
}

Über H.-Peter Pfeufer

Ich bin Webentwickler/ -programmierer aus Leidenschaft, WordPressbegeistert und ab und an auch mal ein netter Mensch.
Vor allen schreibe ich über alles was mit den Themen Webentwicklung/ -programmierung und WordPress zu tun hat. Nebenher auch mal einige Gedanken zu allgemeineren Themen.

Zeige alle Beiträge von H.-Peter Pfeufer →