Botones W3.CSS
Clases de botón W3.CSS
W3.CSS proporciona las siguientes clases de botones:
| Clase | define |
|---|---|
| w3-btn | Un botón rectangular con un efecto de desplazamiento de sombra. El color predeterminado es negro. |
| botón w3 |
Un botón rectangular con un efecto de desplazamiento gris. El color predeterminado es gris claro en la versión 3 de W3.CSS. El color predeterminado se hereda del elemento principal en la versión 4. |
| barra w3 |
Una barra horizontal que se puede usar para agrupar botones. (Perfecto para menús de navegación horizontal) |
| bloque w3 | Clase que se puede usar para definir un botón de ancho completo (100%). |
| círculo w3 | Se puede utilizar para definir un botón circular. |
| ondulación w3 | Se puede utilizar para crear un efecto dominó. |
Botones
Tanto la clase w3-button como la clase w3-btn agregan comportamiento de botón a cualquier elemento HTML.
Los elementos más comunes que se utilizan son <input type="button">, <button> y <a>:
Ejemplo
<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>
Colores de los botones
Todas las clases de color w3 se utilizan para agregar color a los botones:
Ejemplo
<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>
Colores flotantes
Los efectos de desplazamiento también vienen en todos los colores. Aquí están algunas:
Las clases w3-hover- color se utilizan para agregar color flotante a los botones:
Ejemplo
<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 botones
Las clases w3-round- size se utilizan para agregar bordes redondeados a los botones:
Ejemplo
<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>
Tamaños de botones
Las clases de tamaño w3 se pueden usar para definir diferentes tamaños de texto:
Ejemplo
<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>
Bordes de botones
La clase w3-border se puede usar para agregar bordes a los botones.
Las clases w3-border- color se utilizan para definir el color del borde:
Ejemplo
<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>
Sugerencia: agregue la clase w3-round- size para agregar bordes redondeados.
Botones con diferentes efectos de texto
Los botones pueden usar efectos de texto más amplios:
La clase w3-wide agrega un efecto de texto más amplio:
Ejemplo
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
Los botones pueden tener efectos de texto en cursiva y negrita:
Use etiquetas HTML estándar (<i> y <b>) para agregar un efecto de cursiva o negrita al texto del botón:
Ejemplo
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
Botones Con Relleno
Las clases w3-padding- size se usan para agregar relleno adicional alrededor del texto del botón:
Ejemplo
<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>
Botones de ancho completo
Para crear un botón de ancho completo, agregue la clase w3-block al botón.
Los botones de ancho completo tienen un ancho del 100 % y abarcan todo el ancho del elemento principal:
Ejemplo
<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>
Sugerencia: alinee el texto del botón con la clase w3-left-align o la clase w3-right-align .
El tamaño de un bloque se puede definir usando style="width:" .
Ejemplo
<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>
Botones deshabilitados
Los botones se destacan con un efecto de sombra y el cursor se convierte en una mano al pasar el mouse sobre ellos.
Los botones desactivados son opacos (semitransparentes) y muestran una "señal de prohibido estacionar":
La clase w3-disabled se usa para crear un botón deshabilitado (si el elemento admite el atributo deshabilitado de HTML estándar, puede usar el atributo deshabilitado en su lugar):
Ejemplo
<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 botones
Los botones se pueden agrupar en una barra horizontal usando la clase w3-bar :
Ejemplo
<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>
La clase w3-bar se introdujo en W3.CSS versión 2.93/2.94.
Los botones se pueden agrupar sin espacio entre ellos usando la clase w3-bar-item :
Ejemplo
<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>
Las barras de botones se pueden centrar usando la clase w3-center :
Ejemplo
<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 dos (o más) barras de botones en la misma línea, agregue la clase w3-show-inline-block :
Ejemplo
<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 navegación
Las barras de botones se pueden usar fácilmente como barras de navegación:
Ejemplo
<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>
El tamaño de cada elemento se puede definir usando style="width:" :
Ejemplo
<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>
Aprenderá más sobre la navegación más adelante en este tutorial.
Botones izquierdo y derecho
Use la clase .w3-left y la clase .w3-right para hacer flotar los botones hacia la izquierda o hacia la derecha:
Se utiliza para crear botones "anterior/siguiente":
Ejemplo
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
Botones con efectos dominó
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>