User Tutorial zu CSS Styles & HTML im Forum
 

Kapitel 3 : CSS Buttons

Forum Button Farbe und Button Rahmen anpassen
Möchte man auf seiner Seite oder Forum einen Button unterbringen, der mal ein wenig anders aussehen soll als der Standard,
dann kann man CSS Code nutzen, um das richtig zu bewerkstelligen.
Die Anpassung der Farbe und des Rahmens der Buttons kann wieder über verschiedene CSS Varianten erfolgen.
Wir verwenden hier wieder die zuvor vorgestellen Varianten :
 
1) im Quelltext ein Attribut style hinzufügen
2) im Header-Bereich die Style-Anweisungen definieren
3) im Header-Bereich die Style-Anweisungen definieren und zusätzlich die Stylesheeht-Klasse angeben


Variante 1)
Hier wird der Button Style direkt im HTML-Element "button" festgelegt, weshalb dieser Style dann auch NUR FÜR DAS ELEMENT gilt.
Diese Variante ist eine recht häftige Button Einbindung die man recht oft findet,
so auch auf WP beispielsweise bei Kategorien (bei neuer Eintrag) oder den Sportwetten Tipps,
aber auch im Ergebnis Dienst, z.B. die Fussball Ergebnisse in den Buttons der Suchfunktionen vorhanden.
<button style="color:#050; background-color:#FED; font-weight:bold;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif; border-width:1px; border-style:solid; border-color:#050">Wetten</button>


Variante 2)
Hier wird der Style global wieder festgelegt.
Das "button" vor der geschweiften Klammer bedeutet, dass die eingeschlossenen Styles
auf alle Elemente des Typs "button" angewendet werden.
Auch die Button Variante 2 ist gebräuchlich, auch in unserem Forum z.B. siehe neue Ticker in Liveticker,
aber auch bei den Wett-Tipps (System) oder im Wettanbieterverleich, z.B. Wettbörsen findet es seinen Platz.
<style type="text/css">
button
{
color : #050;
background-color : #FED;
font-weight : bold;
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
border-width : 1px;
border-style : solid;
border-color : #050;
}
</style>


Variante 3)
Hier wird der Style ebenfalls global festgelegt.
Zudem wird hier mit dem Zeichen "." nach dem "button"-Element auf eine Stylesheet-Klasse referenziert.
In unserem Beispiel wird also die Stylesheet-Klasse "test" verwendet --> "button.test".
Nun können wir bei den Buttons, bei denen der Style angewendet werden soll, diese Stylesheet-Klasse auswählen,
so dass auch nur diese Elemente entsprechend des Styles angepasst werden.
Hat man also zwei oder mehrere Buttons auf seiner z.B. Wett Seite versieht man jeden Button,
was den zuvor definierten Style anwenden soll mit dem
Attribut "class" und als Wert setzt man den Namen der zu verwendenen Stylesheet-Klasse.
<style type="text/css">
button.test
{
color : #050;
background-color : #FED;
font-weight : bold;
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
border-width : 1px;
border-style : solid;
border-color : #050;
}
</style>
Das dazugehörige "button"-Element zu unserem Beispiel sieht dann so aus :
<button class="test">Wetten</button>

Wer noch einige weitere Beispiele zu CSS Style Buttons möchte,
auch die ein oder andere praxisnahe Alternative sollte mal in unserem
Kapitel 3a CSS Button Beispiele oder auch im
weiteren Beispielkapitel 3b CSS Button mit Tabellen bzw. dem DIV Button Kapitel schauen.

Die obigen Button Varianten bewirken alle folgendes :


 

 
 
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 Sportwetten 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 © 2011 Sportwetten Forum & Tipps Wettpoint.com