find-templates

Button

zurück zur Übersicht

Einen Button erstellen


Eine Frage, die immer wieder gestellt wird, wie man einen Button ohne Grafik erstellen kann.
Dieses Beispiel zeigt, wie aus einem Link ein Button werden kann.

Den HTML-Code für "verlinkten Text" kennen sicherlich die meissten:

<a href="/Seite.htm">Linktext</a>

- als ersten Schritt geben wir der Verlinkung einen "Klassennamen"
- den "Klassennamen" können wir frei wählen. Zum Beispiel button

<a class="button" href="/Seite.htm">Linktext</a>

- diesen Code fügen wir im Seiteninhalt ein,
- dazu im Editor (oben links) auf "Quellcode" klicken, dann den Code einfügen,
- im Seiteninhalt sehen wir bis jetzt nur verlinkten Text


Vom Linktext zum Button

Der CSS-Code beginnt mit dem von uns gewählten Klassennamen,
er bekommt nun die "Eigenschaften" für das gewünschte Aussehen.


Vorschau: Der CSS-Code:
Linktext 
a.button {
   color: black;
   text-decoration: none;
}

- mit color: hat der Link schwarze Textfarbe bekommen,
- mit text-decoration:none; ist er nicht mehr unterstrichen


Vorschau: Der CSS-Code:
Linktext 
 
a.button {
   color: black;
   text-decoration: none;
   border: 1px solid #555555;
}

Den Rahmen erzeugen wir mit border: 1px solid #555555;
1px = Rahmenstärke | solid = Rahmenart | #555555 = Rahmenfarbe


Vorschau: Der CSS-Code:
Linktext 
a.button {
   color: black;
   text-decoration: none;
   border: 1px solid #555555;
   padding: 5px 10px 5px 10px;
}

Einen Innen-Abstand bekommen wir mit padding: 5px 10px 5px 10px;
1. Zahl: Abstand nach oben | 2. Zahl: Abstand nach Rechts | 3. Zahl: nach Unten | 4. Zahl: nach Links


Vorschau: Der CSS-Code:
Linktext 
a.button {
   color: black;
   text-decoration: none;
   border: 1px solid #555555;
   padding: 5px 10px 5px 10px;
   background-color: #DDDDDD;
}

Eine Hintergrundfarbe gabs mit background-color: #DDDDDD;


Vorschau: Der CSS-Code:
Linktext 
a.button {
   color: black;
   text-decoration: none;
   border: 1px solid #555555;
   padding: 5px 10px 5px 10px;
   background-color: #DDDDDD;
   border-radius: 10px;
}

Abgerundete Ecken ? Dem Code zugefügt: border-radius: 10px;


Vorschau: Der CSS-Code:
Linktext 
a.button {
   color: black;
   text-decoration: none;
   border: 1px solid #555555;
   padding: 5px 10px 5px 10px;
   background-color: #DDDDDD;
   border-radius: 10px;
   font-size: 11px;
}

Die Schriftgröße verkleinert, mit font-size: 11px;


Vorschau: Der CSS-Code:
Linktext 
a.button {
   color: black;
   text-decoration: none;
   border: 1px solid #555555;
   padding: 5px 10px 5px 10px;
   background-color: #DDDDDD;
   border-radius: 10px;
   font-size: 11px;
   box-shadow: 2px 2px 5px #777777;
}

Einen Schatten zugefügt, mit box-shadow: . Es hat 3 Werte:
1. Zahl: Schatten nach Rechts | 2. Zahl: Schatten nach Unten | 3. Zahl: Grad der Schärfe.
Je Höher der Dritte Wert, desto "weicher" der Schatten. #777777 = Schattenfarbe.


Hover-Vorschau: CSS-Code mit Hover:
Linktext

bei Mauskontakt (Hover):

Linktext 
a.button {
   color: black;
   text-decoration: none;
   border: 1px solid #555555;
   padding: 5px 10px 5px 10px;
   background-color: #DDDDDD;
   border-radius: 10px;
   font-size: 11px;
   box-shadow: 2px 2px 5px #777777;
}

a.button:hover {
   color: white;
   background-color: black;
}
Den CSS-Code könnt Ihr im Feld "Text ÜBER Design" mit einfügen.

Nur wer dort noch keinen CSS-Code stehen hat, benötigt den "style-tag" dazu.
Dann schreibe vor dem CSS-Code: <style type="text/css"> <!--
und schreibe nach dem CSS-Code: --> </style>



Habt ihr den CSS-Code einmal eingefügt, könnt Ihr immer dort, wo Ihr einen Button benötigt, den HTML-Code im Seiteninhalt oder in der rechten Box einfügen.


Bei Problemen :

Wenn sich z.B. die Linkfarbe nicht anpassen lässt,
ist die Ursache ein (bei euch) schon vorhandener CSS-Code für Linkfarben.
Gewünschter Eigenschaft muss dann hier ein !important angehängt werden.

Beispiel:

Textfarbe: Aus color: #000000; mache color: #000000 !important;

Textgröße: Aus font-size:12px; mache font-size: 12px !important;



Heute: 3 Besucher