CSS Styles im Forum
Kapitel 3a : Ein einfaches Button Beispiel - CSS Styles & HTML im Forum
Wetten Wett-Tipps & online Wetten Forum  Wetten Kapitel 3a : CSS & HTML im Forum
Seite zurueck
User Tutorial zu CSS Styles & HTML im Forum
 

Kapitel 3a : Einfaches CSS Button Beispiel

Forum Einfacher Button mit Farbe, Font oder Bild gestalten
Wie bereits im vorhergehenden Kapitel 3 begonnen nun einige einfache
praktische Beispiele zu CSS Buttons mit verschiedenen Styles.
Buttons sind ja vielfältig einsetzbar, bei uns im Sportwetten Forum bzw. Wettforum,
beispielsweise auch in Suchfunktionen z.B. im Ergebnis Dienst, Formularen wie
bei Bonus Eintragsformular, siehe dem Login bis zu den Fussball Wett-Tipps bzw. Top Tips.
Hier nun ein paar praktische Varianten bzw. alternativen wie man CSS (Cascading Style Sheets) Buttons
mit Hilfe von einfachem CSS Style Code gestalten kann.
 
Wir verwenden hier mal die in den anderen Kapiteln zu den Stylesheets
genannte Variante 1) um im Quelltext für das Element Attribute hinzuzufügen,
das lässt sich einfacher lesen, die Verwendung der Elemente im Header Bereich
würde dabei ja genauso funktionieren, hier der Einfachheit halber nur die eine Alternative.
 
Bei den einfachen Praxis Beispielen zu den Css Buttons interessieren insbesondere
Dinge wie Rahmen, Abstände (mit padding oder margin) sowie
der Einsatz von Hintergrund Bildern bei einem Button.
Ausserdem einiges noch zu Elementen wie z.B. font-family und font-size.
 
1. Beispiel eines einfachen CSS Button
Als erstes beginnen wir mal mit einem dezenten Button für ein Formular und
entsprechendem inline Style mit Font Style Verdana und font-size 12px.
 
<button style="
font-family:Verdana;
font-size:12px;
font-weight:bold;
font-style:none;
border-style:dotted;
border-color:#0C0D0C;
border-width:1px;
background:#F8F8F8;
color:#000000;
width:120px
">Wett Button</button>

Dieser erste CSS Button sieht dann mit Rahmen Formatierung dotted schonmal so aus:
 

 
Im nächsten Schritt soll dieser Button nun einen stärkeren, blauen Rahmen
bekommen, ausserdem soll der Abstand Schrift zu Aussenrahmen groesser sein,
dies koennen wir wie folgt machen :
 
<button style="
font-family:Verdana;
font-size:12px;
font-weight:bold;
font-style:none;
border-style:dotted;
border-color:#0000ff;
border-width:2px;
background:#F8F8F8;
color:#000000;
width:120px;
padding: 5px;
">Wett Button</button>

Nun sieht unser CSS Button mit der neuen Formatierung so aus:
 

 
Was ist passiert ?
Es wurden die neben den Attributen border-color und border-width bezogen auf
den Button Rahmen in Farbe und Dicke auch ein neues Element eingefügt padding.
Dies sorgt dafür, das der innere Abstand zum Bezugselemnt vom Standard auf 5px erhöht wurde.

 
Wer noch andere schicke Button Ideen hat, kann uns gerne weitere Beispiele
und Alternativen schicken um dieses Tutorial weiter zu komplettieren.
Ansonsten gibt es hinsichtlich dem Wett Forum, Hintergrundbilder
für den Button und weitere Tips und Tricks um Buttons sehr schick mit CSS zu gestalten
u.a. in Tabellen Form mehr im Kapitel 3b was sich auch mit Button Beispielen befasst.
 
 
Zurürck zur CSS Tutorial Übersicht : CSS & HTML im Forum
 
 
Wettpoint Übersicht und Forum Index
Wetten Forum & allgemeine Diskussion
Wetten Sportwetten Tipps
Wettforum und Wett-Tipps Wettforum und Wett-Tipps
Archiv Forum Archiv
Wetten Sport allgemein und live
Wetten Statistiken
Wetten Bonus Angebote & Vergleich
Fussball Fussball aktuell
Tennis Tennis aktuell
Eishockey Eishockey aktuell
Basketball Basketball aktuell
CSS Forum   Valid HTML 4.01 Transitional   CSS ist valide!
Sportwetten Forum © 2010 Sportwetten Forum & Tipps Wettpoint.com