Najnowsze tutoriale tworzenie stron internetowych
 

W3.CSS guziki


guziki

Z W3.CSS, wszystkie elementy HTML mogą być przyciski.

Jednak najczęstsze elementy <input>, <button>, a Ra:

Przykład

<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>
Spróbuj sam "

przycisk Kolory

Przyciski są w różnych kolorach, czego potrzebujesz:

Przykład

<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>
Spróbuj sam "

Hover Kolory

Najedź efekty są w różnych kolorach, czego potrzebujesz:

Przykład

<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>
Spróbuj sam "

Kształty przycisk

Przyciski są w różnych kształtach, które trzeba:

Przykład

<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>
Spróbuj sam "

Rozmiary przycisków

Przyciski są w różnych rozmiarach, czego potrzebujesz:

Przykład

<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>
Spróbuj sam "

przycisk graniczny

Przyciski mogą mieć granic.



Przykład

<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>
Spróbuj sam "

Przyciski z efektów tekstowych

Przyciski mogą mieć kursywa, pogrubienie efekty tekstowe.

Przykład

<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
Spróbuj sam "

Przyciski mogą mieć efekty tekstowe cień.

Przykład

<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>
Spróbuj sam "

Przyciski mogą mieć wąskie i szerokie efekty tekstowe.

Przykład

<button class="w3-btn">Normal</button>
<button class="w3-btn w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
Spróbuj sam "

Przyciski pełnej szerokości

Aby utworzyć przycisk pełnej szerokości, dodać klasę w3-btn-blok do elementu.

przyciski pełnej szerokości mają szerokość 100%, a rozciąga się na całą szerokość elementu nadrzędnego:





Przykład

<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>
Spróbuj sam "

Efekty aktywowania / Przyciski niepełnosprawnych

Przyciski wyróżnia się po najechaniu kursorem myszy nad nimi.

Normalne przyciski wyświetlić wskaźnik palec.

Przyciski niepełnosprawnych są nieprzejrzyste i wyświetla "No parking sign".

Przykład

<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>
Spróbuj sam "

przycisk Groups

Przyciski mogą być grupowane (bez przestrzeni pomiędzy) używając "w3-btn-group":


Przykład

<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>
Spróbuj sam "

Przyciski z efektami Ripple

Przyciski mogą mieć negatywne skutki w przypadku ich kliknięciu na:

Przykład

<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>
Spróbuj sam "

Elementy przycisków

Z W3.CSS, wszystkie elementy mogą być przycisk.

Obraz może być przycisk

Wszelkie div, nagłówek, stopkę lub inne pojemniki mogą być przycisk.


Przyciski pływające

W3-btn-pływające klasy, tworzy okrągłe przyciski, które są przeznaczone dla ważnych funkcji:

+ +

Przykład

<a class="w3-btn-floating w3-teal">+</a>
<a class="w3-btn-floating w3-disabled">+</a>
Spróbuj sam "

Użyj W3-btn-zmiennoprzecinkowych dużą klasę dla dużych przycisków pływających:

+ +

Przykład

<a class="w3-btn-floating-large w3-teal">+</a>
<a class="w3-btn-floating-large w3-disabled">+</a>
Spróbuj sam "