Tlačítka W3.CSS
Třídy tlačítek W3.CSS
W3.CSS poskytuje následující třídy pro tlačítka:
| Třída | Definuje |
|---|---|
| w3-btn | Obdélníkové tlačítko se stínovým efektem. Výchozí barva je černá. |
| w3-tlačítko |
Obdélníkové tlačítko s šedým efektem vznášení. Výchozí barva je ve W3.CSS verze 3 světle šedá. Výchozí barva je zděděna z nadřazeného prvku ve verzi 4. |
| w3-bar |
Vodorovný pruh, který lze použít k seskupení tlačítek. (Ideální pro horizontální navigační nabídky) |
| w3-blok | Třída, kterou lze použít k definování tlačítka plné šířky (100 %). |
| w3-kruh | Lze použít k definování kruhového tlačítka. |
| w3-ripple | Lze použít k vytvoření efektu zvlnění. |
Tlačítka
Třída w3-button i třída w3-btn přidávají chování tlačítka do jakýchkoli prvků HTML.
Nejčastěji se používají prvky <input type="button">, <button> a <a>:
Příklad
<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>
Barvy tlačítek
Všechny třídy barev w3- se používají k přidání barvy do tlačítek:
Příklad
<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>
Vznášet barvy
Efekty vznášet se také ve všech barvách. Tady nějaké jsou:
Třídy barev w3-hover- se používají k přidání barvy přechodu k tlačítkům:
Příklad
<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>
Tvary tlačítek
Třídy w3-round- size se používají k přidání zaoblených okrajů k tlačítkům:
Příklad
<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>
Velikosti tlačítek
Třídy velikosti w3 lze použít k definování různých velikostí textu:
Příklad
<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>
Ohraničení tlačítek
Třídu w3-border lze použít k přidání ohraničení k tlačítkům.
Třídy barev w3-border- se používají k definování barvy ohraničení:
Příklad
<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: Přidejte třídu w3-round- size a přidejte zaoblené okraje.
Tlačítka S Různými Textovými Efekty
Tlačítka mohou používat širší textové efekty:
Třída w3-wide přidává širší textový efekt:
Příklad
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
Tlačítka mohou mít efekty kurzívy a tučného textu:
Pomocí standardních značek HTML (<i> a <b>) přidejte do textu tlačítka kurzívu nebo tučné písmo:
Příklad
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
Tlačítka S Polstrováním
Třídy velikosti w3-padding- se používají k přidání dalšího odsazení kolem textu tlačítka:
Příklad
<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>
Tlačítka plné šířky
Chcete-li vytvořit tlačítko s plnou šířkou, přidejte do tlačítka třídu w3-block .
Tlačítka s plnou šířkou mají šířku 100 % a zabírají celou šířku nadřazeného prvku:
Příklad
<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: Zarovnejte text tlačítka s třídou w3-left-align nebo w3-right-align .
Velikost bloku a lze definovat pomocí style="width:" .
Příklad
<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>
Deaktivovaná tlačítka
Tlačítka vynikají efektem stínu a kurzor se při najetí na ně promění v ruku.
Deaktivovaná tlačítka jsou neprůhledná (poloprůhledná) a zobrazují „značku zákaz parkování“:
Třída w3-disabled se používá k vytvoření zakázaného tlačítka (pokud prvek podporuje standardní atribut HTML disabled, můžete místo toho použít atribut disabled):
Příklad
<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>
Tlačítkové lišty
Tlačítka lze seskupit do vodorovného pruhu pomocí třídy w3-bar :
Příklad
<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>
Třída w3-bar byla představena ve W3.CSS verze 2.93 / 2.94.
Tlačítka lze seskupit bez mezery mezi nimi pomocí třídy w3-bar-item :
Příklad
<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>
Lišty tlačítek lze vycentrovat pomocí třídy w3-center :
Příklad
<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>
Chcete-li zobrazit dva (nebo více) pruhů tlačítek na stejném řádku, přidejte třídu w3-show-inline-block :
Příklad
<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>
Navigační lišty
Panely tlačítek lze snadno použít jako navigační panely:
Příklad
<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>
Velikost jednotlivých položek lze definovat pomocí style="width:" :
Příklad
<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>
Více o navigaci se dozvíte později v tomto tutoriálu.
Levé a pravé tlačítko
Pomocí třídy .w3-left a .w3-right můžete tlačítka plout doleva nebo doprava:
Používá se k vytvoření tlačítek "předchozí/další":
Příklad
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
Tlačítka S Zvlněnými Efekty
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>