Buttons
Mit W3.CSS können alle HTML-Elemente Tasten sein.
Aber die am häufigsten vorkommenden Elemente sind <input>, <button> und <a>:
Beispiel
<input class="w3-btn" value="Input Button">
<button class="w3-btn">Button Button</button>
<a class="w3-btn"
href="http://www.w3ii.com">Link Button</a> Versuch es selber " Button-Farben
Buttons sind in allen Farben, die Sie benötigen:
- -
Beispiel
<button class="w3-btn w3-khaki">Khaki</button>
<button class="w3-btn
w3-yellow">Yellow</button>
<button class="w3-btn
w3-orange">Orange</button>
<button class="w3-btn w3-red">Red</button>
<button class="w3-btn w3-purple">Purple</button> Versuch es selber " Hover Farben
Bewegen Sie die Maus kommen Effekte in allen Farben, die Sie benötigen:
- -
Beispiel
<button class="w3-btn w3-hover-khaki">Khaki</button>
<button class="w3-btn
w3-hover-white">White</button>
<button class="w3-btn w3-hover-red">Red</button>
<button class="w3-btn w3-hover-purple">Purple</button> Versuch es selber " Tastenformen
Buttons sind in allen Formen, die Sie brauchen:
Beispiel
<button class="w3-btn">Normal</button>
<button class="w3-btn
w3-round">Round</button>
<button class="w3-btn
w3-round-large">Rounder</button>
<button class="w3-btn
w3-round-xlarge">and Rounder</button>
<button class="w3-btn
w3-round-xxlarge">and Rounder</button>
Versuch es selber " Button-Größen
Buttons sind in allen Größen, die Sie brauchen:
Beispiel
<button class="w3-btn w3-tiny">Tiny</button>
<button class="w3-btn
w3-small">Small</button>
<button class="w3-btn w3-medium">Medium</button>
<button class="w3-btn w3-large">Large</button>
<button class="w3-btn w3-xlarge">xLarge</button>
Versuch es selber " Button-Borders
Schaltflächen können Grenzen haben.
Beispiel
<button class="w3-btn w3-white w3-border">Button</button>
<button class="w3-btn w3-light-grey w3-border">Button</button>
<button class="w3-btn w3-yellow w3-border">Button</button>
<button class="w3-btn w3-white w3-border w3-round">Round</button>
<button class="w3-btn w3-white w3-border w3-round-large">Round</button>
<button class="w3-btn w3-white w3-border w3-round-xlarge">Round</button>
<button class="w3-btn w3-white w3-border w3-border-blue
w3-round">Button</button>
Versuch es selber " Buttons mit Text Effects
Schaltflächen können kursiv und fett Text-Effekte haben.
Beispiel
<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
Versuch es selber " Schaltflächen können Schatten Texteffekte haben.
Beispiel
<button class="w3-btn w3-red w3-text-shadow">Shadow</button>
<button
class="w3-btn w3-red w3-text-shadow"><i>Shadow</i></button>
<button
class="w3-btn w3-red w3-text-shadow"><b>Shadow</b></button>
Versuch es selber " Buttons können schmal und breit Texteffekte haben.
Beispiel
<button class="w3-btn">Normal</button>
<button class="w3-btn
w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
Versuch es selber " Mit voller Breite Buttons
So erstellen Sie eine volle Breite Taste, fügen Sie den w3-btn-Block - Klasse auf ein Element.
Voller Breite Tasten haben eine Breite von 100%, und erstreckt sich über die gesamte Breite des übergeordneten Elements:
Beispiel
<button class="w3-btn-block">Button</button>
<button class="w3-btn-block
w3-teal">Button</button>
<button class="w3-btn-block
w3-red w3-left-align">Button</button> Versuch es selber " Hover Effekte / Disabled Buttons
Buttons bleibt, wenn Sie die Maus über sie.
Normale Tasten zeigen einen Finger-Zeiger.
Disabled Tasten sind undurchsichtig und zeigen ein "no parking sign".
Beispiel
<button class="w3-btn">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
<input type="button"
class="w3-btn" value="Button">
<input type="button" class="w3-btn"
value="Button" disabled> Versuch es selber " Button-Gruppen
Buttons können in Gruppen zusammengefasst werden (ohne Leerzeichen dazwischen) mit "w3-btn-Gruppe":
Beispiel
<div class="w3-btn-group">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn"
disabled>Button</button>
</div>
<div
class="w3-btn-group">
<button class="w3-btn w3-light-grey"
style="width:33.3%">One</button>
<button class="w3-btn
w3-light-grey" style="width:33.3%">Two</button>
<button
class="w3-btn w3-light-grey" style="width:33.3%">Three</button>
</div>
Versuch es selber " Buttons mit Ripple Effects
Schaltflächen können Wellen-Effekte haben, wenn sie angeklickt:
Beispiel
<button class="w3-btn w3-ripple">Button</button>
<button
class="w3-btn w3-ripple w3-red">Button</button>
<button class="w3-btn
w3-ripple w3-yellow">Button</button>
Versuch es selber " Button-Elements
Mit W3.CSS können alle Elemente eine Taste sein.
Ein Bild kann eine Schaltfläche
Alle div, Kopf- und Fußzeile oder andere Behälter kann eine Taste sein.
Schwimmdock Buttons
Die w3-btn-Floating - Klasse schafft Kreis Tasten , die für wichtige Funktionen gemeint sind:
Beispiel
<a class="w3-btn-floating w3-teal">+</a>
<a
class="w3-btn-floating w3-disabled">+</a>
Versuch es selber " Verwenden Sie die w3-btn-Floating-große Klasse für große schwimmende Tasten:
Beispiel
<a class="w3-btn-floating-large w3-teal">+</a>
<a
class="w3-btn-floating-large w3-disabled">+</a>
Versuch es selber "