Homepapa Beispiele

Hyperlinks

5. Rahmen

Um wirklich den Eindruck einer Schaltfläche zu erwecken, sollte der Link auch noch einen Rahmen haben. Der einfachste Fall wäre nun z.B.
{ ... ; border: 1px black solid ; ... }

"Border" heisst Rahmen. Der Rahmen im Beispiel wird 1 Pixel dick, schwarz und besteht aus einer durchgezogenen Linie. Dicke und Farbe kannst du nach Belieben ändern. Für die Charakteristik des Rahmens gibt es einige wenige definierte Möglichkeiten wie eben "solid". Zwei weitere siehst du in unserem Demonstrationslink:

a.beisp:link    { padding: .5em 2em ; background-color: orange ;
                  color: white; font-weight: bold ;
                  border: 3px red outset }
a.beisp:visited { padding: .5em 2em ; background-color: orange ;
                  color: white; font-weight: bold ;
                  border: 3px red outset }
a.beisp:hover   { background-color: red ;
                  border: 3px orange inset }

Link

Mit den geeigneten Angaben kannst du damit auch Standard-Knöpfe machen:

a.beisp2:link    { padding: .2em 2em ; background-color: #aaa ;
                   color: black; text-decoration: none ;
                   border: 2px white outset }
a.beisp2:visited { padding: .2em 2em ; background-color: #aaa ;
                   color: black; text-decoration: none ;
                   border: 2px white outset }
a.beisp2:hover   { border: 2px white inset }

Link

Du siehst hier zugleich auch noch eine Variation der Farb-Angabe und den Ausdruck text-decoration: none, mit dem das Unterstreichen des Link-Textes aufgehoben werden kann.