Botões W3.CSS
Classes de botão W3.CSS
W3.CSS fornece as seguintes classes para botões:
| Classe | Define |
|---|---|
| w3-btn | Um botão retangular com efeito de sombra. A cor padrão é preto. |
| botão w3 |
Um botão retangular com um efeito de foco cinza. A cor padrão é cinza claro no W3.CSS versão 3. A cor padrão é herdada do elemento pai na versão 4. |
| w3-bar |
Uma barra horizontal que pode ser usada para agrupar botões. (Perfeito para menus de navegação horizontais) |
| w3-bloco | Classe que pode ser usada para definir um botão de largura total (100%). |
| w3-círculo | Pode ser usado para definir um botão circular. |
| w3-ripple | Pode ser usado para criar um efeito cascata. |
Botões
Tanto a classe w3-button quanto a classe w3-btn adicionam comportamento de botão a qualquer elemento HTML.
Os elementos mais comuns a serem usados são <input type="button">, <button> e <a>:
Exemplo
<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>
Cores dos botões
Todas as classes w3 - color são usadas para adicionar cor aos botões:
Exemplo
<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>
Cores de foco
Os efeitos de foco também vêm em todas as cores. Aqui estão alguns:
As classes w3-hover- color são usadas para adicionar cores de foco aos botões:
Exemplo
<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>
Formas de botão
As classes w3-round- size são usadas para adicionar bordas arredondadas aos botões:
Exemplo
<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>
Tamanhos de botão
As classes w3- size podem ser usadas para definir diferentes tamanhos de texto:
Exemplo
<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>
Bordas do botão
A classe w3-border pode ser usada para adicionar bordas aos botões.
As classes w3-border- color são usadas para definir a cor da borda:
Exemplo
<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>
Dica: Adicione a classe w3-round- size para adicionar bordas arredondadas.
Botões com efeitos de texto diferentes
Os botões podem usar efeitos de texto mais amplos:
A classe w3-wide adiciona um efeito de texto mais amplo:
Exemplo
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
Os botões podem ter efeitos de texto em itálico e negrito:
Use tags HTML padrão (<i> e <b>) para adicionar efeito itálico ou negrito ao texto do botão:
Exemplo
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
Botões com preenchimento
As classes w3-padding- size são usadas para adicionar preenchimento extra ao redor do texto do botão:
Exemplo
<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>
Botões de largura total
Para criar um botão de largura total, adicione a classe w3-block ao botão.
Os botões de largura total têm uma largura de 100% e abrangem toda a largura do elemento pai:
Exemplo
<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>
Dica: alinhe o texto do botão com a classe w3-left-align ou a classe w3-right-align .
O tamanho do bloco a pode ser definido usando style="width:" .
Exemplo
<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>
Botões desativados
Os botões se destacam com um efeito de sombra e o cursor se transforma em uma mão ao passar o mouse sobre eles.
Os botões desativados são opacos (semitransparentes) e exibem um "sinal de proibição de estacionamento":
A classe w3-disabled é usada para criar um botão desabilitado (se o elemento suportar o atributo HTML padrão desabilitado, você pode usar o atributo desabilitado):
Exemplo
<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>
Barras de botões
Os botões podem ser agrupados em uma barra horizontal usando a classe w3-bar :
Exemplo
<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>
A classe w3-bar foi introduzida no W3.CSS versão 2.93 / 2.94.
Os botões podem ser agrupados sem espaço entre eles usando a classe w3-bar-item :
Exemplo
<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>
As barras de botões podem ser centralizadas usando a classe w3-center :
Exemplo
<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>
Para mostrar duas (ou mais) barras de botões na mesma linha, adicione a classe w3-show-inline-block :
Exemplo
<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>
Barras de navegação
As barras de botões podem ser facilmente usadas como barras de navegação:
Exemplo
<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>
O tamanho de cada item pode ser definido usando style="width:" :
Exemplo
<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>
Você aprenderá mais sobre navegação posteriormente neste tutorial.
Botões esquerdo e direito
Use a classe .w3-left e a classe .w3-right para flutuar os botões para a esquerda ou para a direita:
Usado para criar botões "anterior/próximo":
Exemplo
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
Botões com efeitos de ondulação
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>