botões
Com W3.CSS, todos os elementos HTML podem ser botões.
Mas os elementos mais comuns são <input>, <button>, e <a>:
Exemplo
<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> Tente você mesmo " Cores do botão
Botões vêm em todas as cores que você precisa:
Exemplo
<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> Tente você mesmo " Cores Hover
Passe efeitos vêm em todas as cores que você precisa:
Exemplo
<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> Tente você mesmo " Formas de botão
Botões vêm em todas as formas que você precisa:
Exemplo
<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>
Tente você mesmo " tamanhos de botão
Botões vêm em todos os tamanhos que você precisa:
Exemplo
<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>
Tente você mesmo " Fronteiras botão
Os botões podem ter fronteiras.
Exemplo
<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>
Tente você mesmo " Botões com efeitos de texto
Os botões podem ter efeitos de texto em itálico e negrito.
Exemplo
<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
Tente você mesmo " Os botões podem ter efeitos de texto sombra.
Exemplo
<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>
Tente você mesmo " Os botões podem ter efeitos de texto fino e largura.
Exemplo
<button class="w3-btn">Normal</button>
<button class="w3-btn
w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
Tente você mesmo " De largura completa Botões
Para criar um botão de largura completa, adicionar a classe btn-w3-block a um elemento.
De largura total teclas tem uma largura de 100%, e se estende por toda a largura do elemento pai:
Exemplo
<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> Tente você mesmo " Hover Effects / pessoas com mobilidade Botões
Botões se destaca quando você passa o mouse sobre eles.
botões normais exibir um ponteiro dedo.
botões com deficiência são opacas e exibir uma "nenhum sinal do estacionamento".
Exemplo
<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> Tente você mesmo " botão Grupos
Os botões podem ser agrupadas (sem espaço entre elas), utilizando "btn-w3-group":
Exemplo
<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>
Tente você mesmo " Botões com efeitos em cascata
Os botões podem ter efeitos em cascata quando eles são clicados:
Exemplo
<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>
Tente você mesmo " Elementos de botão
Com W3.CSS, todos os elementos pode ser um botão.
Uma imagem pode ser um botão
Qualquer div, cabeçalho, rodapé ou outros recipientes pode ser um botão.
flutuante Botões
A classe btn-w3-flutuante, cria botões circulares que são destinados para funções importantes:
Exemplo
<a class="w3-btn-floating w3-teal">+</a>
<a
class="w3-btn-floating w3-disabled">+</a>
Tente você mesmo " Use a grande flutuando-btn-w3-class para grandes botões flutuantes:
Exemplo
<a class="w3-btn-floating-large w3-teal">+</a>
<a
class="w3-btn-floating-large w3-disabled">+</a>
Tente você mesmo "