W3.Przyciski CSS
W3.CSS Klasy przycisków
W3.CSS udostępnia następujące klasy dla przycisków:
| Klasa | Definiuje |
|---|---|
| w3-btn | Prostokątny przycisk z efektem najechania cieniem. Domyślny kolor to czarny. |
| przycisk w3 |
Prostokątny przycisk z szarym efektem najechania. Domyślny kolor to jasnoszary w wersji W3.CSS 3. Domyślny kolor jest dziedziczony z elementu nadrzędnego w wersji 4. |
| w3-bar |
Poziomy pasek, którego można używać do grupowania przycisków. (Idealny do poziomych menu nawigacyjnych) |
| w3-blok | Klasa, której można użyć do zdefiniowania przycisku o pełnej szerokości (100%). |
| w3-koło | Może służyć do definiowania okrągłego przycisku. |
| w3-marszczyć | Może być używany do tworzenia efektu fali. |
guziki
Zarówno klasa w3-button , jak i klasa w3-btn dodają zachowanie przycisku do dowolnych elementów HTML.
Najczęściej używane elementy to <input type="button">, <button> i <a>:
Przykład
<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>
Kolory przycisków
Wszystkie klasy kolorów w3 służą do dodawania koloru do przycisków:
Przykład
<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>
Kolory kursora
Efekty najechania są również dostępne we wszystkich kolorach. Oto niektóre:
Klasy w3-hover- color służą do dodawania koloru najechania do przycisków:
Przykład
<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>
Kształty przycisków
Klasy w3 round- size służą do dodawania zaokrąglonych ramek do przycisków:
Przykład
<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>
Rozmiary przycisków
Klasy rozmiarów w3 mogą służyć do definiowania różnych rozmiarów tekstu:
Przykład
<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>
Obramowania przycisków
Klasa w3-border może służyć do dodawania obramowań do przycisków.
Klasy w3-border- color służą do zdefiniowania koloru obramowania:
Przykład
<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>
Wskazówka: Dodaj klasę w3-round- size , aby dodać zaokrąglone obramowania.
Przyciski z różnymi efektami tekstowymi
Przyciski mogą używać szerszych efektów tekstowych:
Klasa w3-wide dodaje szerszy efekt tekstowy:
Przykład
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
Przyciski mogą mieć efekty kursywy i pogrubienia:
Użyj standardowych znaczników HTML (<i> i <b>), aby dodać efekt kursywy lub pogrubienia do tekstu przycisku:
Przykład
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
Przyciski z wyściółką
Klasy w3 padding- size służą do dodawania dodatkowego wypełnienia wokół tekstu przycisku:
Przykład
<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>
Przyciski o pełnej szerokości
Aby utworzyć przycisk o pełnej szerokości, dodaj do przycisku klasę w3-block .
Przyciski o pełnej szerokości mają szerokość 100% i obejmują całą szerokość elementu nadrzędnego:
Przykład
<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>
Porada: Wyrównaj tekst przycisku z klasą w3-left-align lub w3-right-align .
Rozmiar bloku można zdefiniować za pomocą style="width:" .
Przykład
<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>
Wyłączone przyciski
Przyciski wyróżniają się efektem cienia, a kursor po najechaniu na nie zamienia się w dłoń.
Wyłączone przyciski są nieprzezroczyste (półprzezroczyste) i wyświetlają „znak zakazu parkowania”:
Klasa w3-disabled służy do tworzenia przycisku wyłączonego (jeśli element obsługuje standardowy atrybut wyłączonego HTML, możesz zamiast tego użyć atrybutu wyłączonego):
Przykład
<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>
Paski przycisków
Przyciski można zgrupować razem na poziomym pasku za pomocą klasy w3-bar :
Przykład
<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>
Klasa w3-bar została wprowadzona w wersji W3.CSS 2.93/2.94.
Przyciski można grupować razem bez spacji między nimi za pomocą klasy w3-bar-item :
Przykład
<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>
Paski przycisków można wyśrodkować za pomocą klasy w3-center :
Przykład
<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>
Aby wyświetlić dwa (lub więcej) paski przycisków w tej samej linii, dodaj klasę w3-show-inline-block :
Przykład
<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>
Paski nawigacyjne
Paski przycisków mogą być z łatwością używane jako paski nawigacyjne:
Przykład
<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>
Rozmiar każdego elementu można zdefiniować za pomocą style="width:" :
Przykład
<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>
Więcej o nawigacji dowiesz się w dalszej części tego samouczka.
Przyciski lewy i prawy
Użyj klasy .w3-left i .w3-right , aby przesunąć przyciski w lewo lub w prawo:
Służy do tworzenia przycisków „poprzedni/następny”:
Przykład
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
Przyciski z efektami tętnienia
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>