User Tutorial zu CSS Styles & HTML im Forum
 

Kapitel 3c : Weitere Beispiele CSS Button mit DIV

Forum Einen DIV Button mit Farbe, Rahmen gestalten
In diesem Teilabschnitt unseres CSS Tutorials bzw. How-To zur Css Button Gestaltung
geht es nun um die Verwendung von Element DIV beim Erstellen von Button Styles.
Solche mit div und entsprechendem Style erstellten CSS Buttons sind sehr gebräuchlich und
in unserem Sportwetten Forum, siehe Sportwetten Forum recht häufig anzutreffen.
 
1. Beispiel eines CSS Button mit DIV
Um einen solchen Button zu erstellen benötigen wir zunächst
das div Element :
 
<div>Wetten Forum</div>
 
Hier ist ohne entsprechenden Button Style noch nicht allzu viel
von einem cSS Button zu erkennen, sodas wir nun uns um dessen
Gestaltung mit Hilfe der Cascading Style Sheets kümmern müssen.
Dazu definieren wir im Header Bereich (Variante 2) entsprechenden Style :
 
a.bt11:link       { color: #ffffff; text-decoration: none }
a.bt11:hover      { color: #cc0000; text-decoration: none }
a.bt11:visited    { color: #ffffff; text-decoration: none }
.bt12 { width:110px;background:#e1ebf0;padding:1px;border: 1px solid #487D97;white-space:nowrap;text-align:center; }
.bt13 { width:100%;height:100%;border:1px solid #487D97;background:#487D97; }
.bt14 { padding-right:4px; }
.bt15 { font-family:Verdana;font-weight:bold;font-size:10px;font-variant:small-caps;color:#ffffff; }
Nachdem wir die Klassen für unseren Beispiel Button definiert haben,
wenden wir uns dem Button selbst zu, dabei verwenden wir neben div auch span,
sowie einige Navigations Elemente als Bilder um das schicker zu machen und
fügen unsere zuvor definierten CSS Classes in den Button ein :
 
<div class="bt12"><span class="bt13"><span class="bt14">
<img border="0" src="/m_r.gif" width="4" height="7" alt="Tippen">
<img src="/m_r.gif" border="0" width="4" height="7" alt="Tippen"></span>
<span class="bt15"><a class="bt11" href="#">WETTEN FORUM</a></span></span></div>
Ist das vollbracht erreichen wir somit folgendes Button Ergebnis :
 

 
Wir machen hierzu noch weitere Button Beispiele fertig, da diese Variante
eben sehr häufig ist und auch umfassende Möglichkeiten bietet.
Auch hier sind verschiedenste Mouseover Effekte möglich auch was die
Einbindung von Bildern bei einem Button betrifft z.B. der Forum Suche Bet365 Auszahlung im Navi Menü.
 
Im Zusatz Kapitel 3d gibt es dann weitere Buttons und auch Hilfestellung
beim Einsatz, da gerade bei den Div Buttons sich auch einige Probleme ergeben,
dazu aber dann mehr im nächsten Kapitel.
 
 
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 Archiv
Wetten Sport allgemein
Wetten Statistiken
Wetten Bonus Angebote & Vergleich Buchmacher
Fussball Fussball aktuell
Tennis Tennis aktuell
Eishockey Eishockey aktuell
Basketball Basketball aktuell
CSS Forum   Valid HTML 4.01 Transitional   CSS ist valide!
Sportwetten Forum © 2011 Sportwetten Forum & Tipps Wettpoint.com