W3.CSS- knoppen
W3.CSS-knopklassen
W3.CSS biedt de volgende klassen voor knoppen:
| Klas | definieert |
|---|---|
| w3-btn | Een rechthoekige knop met een schaduweffect. Standaardkleur is zwart. |
| w3-knop |
Een rechthoekige knop met een grijs hover-effect. De standaardkleur is lichtgrijs in W3.CSS versie 3. De standaardkleur is overgenomen van het bovenliggende element in versie 4. |
| w3-bar |
Een horizontale balk die kan worden gebruikt om knoppen te groeperen. (Perfect voor horizontale navigatiemenu's) |
| w3-blok | Klasse die kan worden gebruikt om een knop met volledige breedte (100%) te definiëren. |
| w3-cirkel | Kan worden gebruikt om een ronde knop te definiëren. |
| w3-rimpeling | Kan worden gebruikt om een rimpeleffect te creëren. |
Toetsen
Zowel de klasse w3-button als de klasse w3-btn voegen knopgedrag toe aan alle HTML-elementen.
De meest gebruikte elementen zijn <input type="button">, <button> en <a>:
Voorbeeld
<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>
Knopkleuren
Alle w3 -kleurklassen worden gebruikt om kleur aan knoppen toe te voegen:
Voorbeeld
<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>
Zweefkleuren
Zweefeffecten zijn er ook in alle kleuren. Hier zijn een paar:
De klassen w3-hover- color worden gebruikt om hover-kleur aan knoppen toe te voegen:
Voorbeeld
<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>
Knopvormen
De klassen w3-ronde- grootte worden gebruikt om afgeronde randen aan knoppen toe te voegen:
Voorbeeld
<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>
Knop maten
De w3- grootteklassen kunnen worden gebruikt om verschillende tekstgroottes te definiëren:
Voorbeeld
<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>
Knopranden
De klasse w3-border kan worden gebruikt om randen aan knoppen toe te voegen.
De w3-border-kleurklassen worden gebruikt om de kleur van de rand te definiëren:
Voorbeeld
<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>
Tip: Voeg de klasse w3-round- size toe om afgeronde randen toe te voegen.
Knoppen met verschillende teksteffecten
Knoppen kunnen bredere teksteffecten gebruiken:
De klasse w3-brede voegt een breder teksteffect toe:
Voorbeeld
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
Knoppen kunnen cursieve en vetgedrukte teksteffecten hebben:
Gebruik standaard HTML-tags (<i> en <b>) om cursief of vetgedrukt effect toe te voegen aan de knoptekst:
Voorbeeld
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
Knopen met vulling
De klassen w3-padding- size worden gebruikt om extra opvulling rond de knoptekst toe te voegen:
Voorbeeld
<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>
Knoppen over de volledige breedte
Om een knop op volledige breedte te maken, voegt u de klasse w3-block toe aan de knop.
Knoppen op volledige breedte hebben een breedte van 100% en beslaan de volledige breedte van het bovenliggende element:
Voorbeeld
<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>
Tip: lijn de knoptekst uit met de klasse w3-left-align of de klasse w3-right-align .
De grootte van het a-blok kan worden gedefinieerd met style="width:" .
Voorbeeld
<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>
Uitgeschakelde knoppen
Knoppen vallen op door een schaduweffect en de cursor verandert in een hand als je er met de muis overheen gaat.
Uitgeschakelde knoppen zijn ondoorzichtig (semi-transparant) en vertonen een "verboden parkeerbord":
De klasse w3-disabled wordt gebruikt om een uitgeschakelde knop te maken (als het element het standaard HTML-gehandicapte kenmerk ondersteunt, kunt u in plaats daarvan het uitgeschakelde kenmerk gebruiken):
Voorbeeld
<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>
Knoppenbalken
Knoppen kunnen worden gegroepeerd in een horizontale balk met behulp van de klasse w3-bar :
Voorbeeld
<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>
De klasse w3-bar werd geïntroduceerd in W3.CSS versie 2.93 / 2.94.
Knoppen kunnen worden gegroepeerd zonder een spatie ertussen door w3-bar-item class te gebruiken:
Voorbeeld
<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>
Knoppenbalken kunnen worden gecentreerd met behulp van de klasse w3-center :
Voorbeeld
<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>
Om twee (of meer) knoppenbalken op dezelfde regel weer te geven, voegt u de klasse w3-show-inline-block toe :
Voorbeeld
<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>
Navigatiebalken
Knoppenbalken kunnen eenvoudig worden gebruikt als navigatiebalken:
Voorbeeld
<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>
De grootte van elk item kan worden gedefinieerd met style="width:" :
Voorbeeld
<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>
Later in deze zelfstudie leert u meer over navigatie.
Links en Rechts Knoppen
Gebruik de klasse .w3-left en de klasse .w3-right om de knoppen naar links of naar rechts te laten zweven:
Gebruikt om "vorige/volgende" knoppen te maken:
Voorbeeld
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
Knoppen met rimpeleffecten
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>