W3.CSS- Schaltflächen
W3.CSS-Schaltflächenklassen
W3.CSS bietet die folgenden Klassen für Schaltflächen:
| Klasse | Definiert |
|---|---|
| w3-btn | Eine rechteckige Schaltfläche mit einem Schatten-Hover-Effekt. Die Standardfarbe ist schwarz. |
| w3-Taste |
Eine rechteckige Schaltfläche mit einem grauen Hover-Effekt. Die Standardfarbe ist in W3.CSS Version 3 hellgrau. Die Standardfarbe wird in Version 4 vom übergeordneten Element geerbt. |
| w3-bar |
Eine horizontale Leiste, die zum Gruppieren von Schaltflächen verwendet werden kann. (Perfekt für horizontale Navigationsmenüs) |
| w3-Block | Klasse, die verwendet werden kann, um eine Schaltfläche mit voller Breite (100 %) zu definieren. |
| w3-Kreis | Kann verwendet werden, um eine kreisförmige Schaltfläche zu definieren. |
| w3-Welligkeit | Kann verwendet werden, um einen Welleneffekt zu erzeugen. |
Tasten
Sowohl die w3-button- Klasse als auch die w3-btn- Klasse fügen allen HTML-Elementen Button-Verhalten hinzu.
Die am häufigsten verwendeten Elemente sind <input type="button">, <button> und <a>:
Beispiel
<input class="w3-button w3-black" type="button" value="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-button w3-black">Link Button</a>
<input class="w3-btn w3-black" type="button" value="Input Button">
<button class="w3-btn w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-btn w3-black">Link Button</a>
Tastenfarben
Alle w3- Farbklassen werden verwendet, um Schaltflächen Farbe hinzuzufügen:
Beispiel
<button class="w3-button w3-black">Black</button>
<button class="w3-button w3-khaki">Khaki</button>
<button class="w3-button w3-yellow">Yellow</button>
<button class="w3-button w3-red">Red</button>
<button class="w3-button w3-purple">Purple</button>
Hover-Farben
Hover-Effekte gibt es auch in allen Farben. Hier sind einige:
Die Klasse w3-hover- color wird verwendet, um Schaltflächen Hover-Farben hinzuzufügen:
Beispiel
<button class="w3-button w3-hover-black">Black</button>
<button class="w3-button w3-hover-red">Red</button>
<button class="w3-button w3-hover-purple">Purple</button>
Schaltflächenformen
Die w3-round- size - Klassen werden verwendet, um Schaltflächen abgerundete Ränder hinzuzufügen:
Beispiel
<button class="w3-button w3-round">Round</button>
<button class="w3-button w3-round-large">Rounder</button>
<button class="w3-button w3-round-xlarge">and Rounder</button>
<button class="w3-button w3-round-xxlarge">and Rounder</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>
Knopfgrößen
Die w3- Größenklassen können verwendet werden, um verschiedene Textgrößen zu definieren:
Beispiel
<button class="w3-button w3-tiny">Tiny</button>
<button class="w3-button w3-small">Small</button>
<button class="w3-button w3-medium">Medium</button>
<button class="w3-button w3-large">Large</button>
<button class="w3-button w3-xlarge">xLarge</button>
<button class="w3-button w3-xxlarge">XXLarge</button>
<button class="w3-button w3-xxxlarge">XXXLarge</button>
<button class="w3-button w3-jumbo">Jumbo</button>
Button-Grenzen
Die Klasse w3-border kann verwendet werden, um Schaltflächen Rahmen hinzuzufügen.
Die w3-border- color - Klassen werden verwendet, um die Farbe des Rahmens zu definieren:
Beispiel
<button class="w3-button w3-white w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-blue">Button</button>
<button class="w3-button w3-yellow w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-red w3-round-large">Button</button>
Tipp: Fügen Sie die Klasse w3-round- size hinzu, um abgerundete Ränder hinzuzufügen.
Schaltflächen mit verschiedenen Texteffekten
Schaltflächen können breitere Texteffekte verwenden:
Die Klasse w3-wide fügt einen breiteren Texteffekt hinzu:
Beispiel
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
Schaltflächen können kursive und fette Texteffekte haben:
Verwenden Sie Standard-HTML-Tags (<i> und <b>), um den Schaltflächentext kursiv oder fett darzustellen:
Beispiel
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
Knöpfe mit Polsterung
Die Klasse w3-padding- size wird verwendet, um zusätzliche Polsterung um den Schaltflächentext herum hinzuzufügen:
Beispiel
<button class="w3-button w3-padding-small">Button</button>
<button class="w3-button">Button</button>
<button class="w3-button w3-padding-large">Button</button>
<button class="w3-btn w3-padding-small">Button</button>
<button class="w3-btn">Button</button>
<button class="w3-btn w3-padding-large">Button</button>
Tasten in voller Breite
Um eine Schaltfläche in voller Breite zu erstellen, fügen Sie der Schaltfläche die Klasse w3-block hinzu .
Schaltflächen in voller Breite haben eine Breite von 100 % und erstrecken sich über die gesamte Breite des übergeordneten Elements:
Beispiel
<button class="w3-button w3-block">Button</button>
<button class="w3-button w3-block w3-teal">Button</button>
<button class="w3-button w3-block w3-red w3-left-align">Button</button>
<button class="w3-btn w3-block">Button</button>
<button class="w3-btn w3-block w3-teal">Button</button>
<button class="w3-btn w3-block w3-red w3-left-align">Button</button>
Tipp: Richten Sie den Schaltflächentext mit der Klasse w3-left-align oder der Klasse w3-right-align aus .
Die Größe des a-Blocks kann mit style="width:" definiert werden .
Beispiel
<button class="w3-button w3-block w3-black"
style="width:30%">Button</button>
<button class="w3-button w3-block w3-teal" style="width:50%">Button</button>
<button class="w3-button w3-block w3-red" style="width:80%">Button</button>
Deaktivierte Schaltflächen
Schaltflächen heben sich durch einen Schatteneffekt ab und der Mauszeiger verwandelt sich in eine Hand, wenn man mit der Maus darüber fährt.
Deaktivierte Schaltflächen sind undurchsichtig (halbtransparent) und zeigen ein „Parkverbotsschild“ an:
Die w3-disabled- Klasse wird verwendet, um eine deaktivierte Schaltfläche zu erstellen (wenn das Element das Standard-HTML-Attribut „deaktiviert“ unterstützt, können Sie stattdessen das deaktivierte Attribut verwenden):
Beispiel
<a class="w3-button w3-disabled" href="https://www.w3schools.com">Link Button</a>
<button class="w3-button" disabled>Button</button>
<input type="button" class="w3-button" value="Button" disabled>
<a class="w3-btn w3-disabled" href="https://www.w3schools.com">Link Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>
Knopfleisten
Schaltflächen können mithilfe der Klasse w3-bar in einer horizontalen Leiste gruppiert werden :
Beispiel
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-red">Button</button>
</div>
Die Klasse w3-bar wurde in W3.CSS Version 2.93 / 2.94 eingeführt.
Schaltflächen können ohne Leerzeichen gruppiert werden, indem die Klasse w3-bar-item verwendet wird :
Beispiel
<div class="w3-bar">
<button class="w3-bar-item w3-button w3-black">Button</button>
<button class="w3-bar-item w3-button w3-teal">Button</button>
<button class="w3-bar-item w3-button w3-red">Button</button>
</div>
Schaltflächenleisten können mit der Klasse w3-center zentriert werden :
Beispiel
<div class="w3-center">
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-disabled">Button</button>
</div>
</div>
Um zwei (oder mehr) Schaltflächenleisten in derselben Zeile anzuzeigen, fügen Sie die Klasse w3-show-inline-block hinzu :
Beispiel
<div class="w3-show-inline-block">
<div class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
<div
class="w3-show-inline-block">
<div
class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
Navigationsleisten
Schaltflächenleisten können einfach als Navigationsleisten verwendet werden:
Beispiel
<div class="w3-bar w3-black">
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
</div>
Die Größe der einzelnen Elemente kann mit style="width:" definiert werden :
Beispiel
<div
class="w3-bar">
<button class="w3-bar-item w3-button"
style="width:33.3%">Button</button>
<button class="w3-bar-item w3-button
w3-teal" style="width:33.3%">Button</button>
<button
class="w3-bar-item w3-button w3-red" style="width:33.3%">Button</button>
</div>
Später in diesem Tutorial erfahren Sie mehr über die Navigation.
Linke und rechte Tasten
Verwenden Sie die Klasse .w3-left und die Klasse .w3-right , um Schaltflächen nach links oder rechts schweben zu lassen:
Wird verwendet, um "Zurück/Weiter"-Schaltflächen zu erstellen:
Beispiel
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
Schaltflächen mit Ripple-Effekten
The w3-ripple class creates a ripple effect on buttons (when they are clicked on):
Example
<button class="w3-button w3-ripple">Button</button>
<button
class="w3-button w3-ripple w3-red">Button</button>
<button class="w3-button
w3-ripple w3-yellow">Button</button>
All Elements Can Be Buttons
With W3.CSS, all elements can be a button:
A picture can be a w3-button
A picture can be a w3-btn
Any div, header, footer or other containers can be a w3-btn!
Circular Buttons
The w3-circle class can be used to create circular buttons:
Example
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>
Square buttons:
Example
<button class="w3-button w3-black">+</button>
<button
class="w3-button w3-teal">+</button>