Los últimos tutoriales de desarrollo web
 

W3.CSS Botones


Botones

Con W3.CSS, todos los elementos HTML pueden ser botones.

Pero los elementos más comunes son <input>, <botón> y <a>:

Botón de

Ejemplo

<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>
Inténtalo tú mismo "

botón Colores

Botones vienen en todos los colores que usted necesita:

amarillo

Ejemplo

<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>
Inténtalo tú mismo "

Hover Colores

Pase el ratón efectos vienen en todos los colores que usted necesita:

Ejemplo

<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>
Inténtalo tú mismo "

forma de los botones

Botones vienen en todas las formas que necesite:

redondo

Ejemplo

<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>
Inténtalo tú mismo "

Tamaños de botón

Botones vienen en todos los tamaños que usted necesita:

Ejemplo

<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>
Inténtalo tú mismo "

Bordes de botón

Los botones pueden tener bordes.



Ejemplo

<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>
Inténtalo tú mismo "

Botones con efectos de texto

Los botones pueden tener efectos de texto en negrita y cursiva.

Ejemplo

<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
Inténtalo tú mismo "

Los botones pueden tener efectos sombra texto.

Ejemplo

<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>
Inténtalo tú mismo "

Los botones pueden tener efectos de texto delgadas y anchas.

Ejemplo

<button class="w3-btn">Normal</button>
<button class="w3-btn w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
Inténtalo tú mismo "

De ancho completo Botones

Para crear un botón de ancho completo, agregue la clase W3-btn-bloque a un elemento.

botones de ancho completo tienen una anchura de 100%, y se extiende por toda la anchura del elemento padre:





Ejemplo

<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>
Inténtalo tú mismo "

Efectos de activación / movilidad Botones

Botones destaca al pasar el ratón sobre ellos.

botones normales muestran un puntero dedo.

Botones de movilidad son opacas y muestran una "muestra del estacionamiento".

Ejemplo

<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>
Inténtalo tú mismo "

grupos de botones

Los botones pueden ser agrupados juntos (sin espacio entre ellos) usando "w3-btn-grupo":


dos,

Ejemplo

<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>
Inténtalo tú mismo "

Botones con regueros de pólvora

Los botones pueden tener un efecto dominó cuando se hace clic en:

Ejemplo

<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>
Inténtalo tú mismo "

Elementos del botón

Con W3.CSS, todos los elementos pueden ser un botón.

Una imagen puede ser un botón

Cualquier div, encabezado, pie u otros recipientes pueden ser un botón.


flotante Botones

La flotación w3-btn clase, crea botones circulares que están destinados para funciones importantes:

+ +

Ejemplo

<a class="w3-btn-floating w3-teal">+</a>
<a class="w3-btn-floating w3-disabled">+</a>
Inténtalo tú mismo "

Utilizar la gran w3-btn-flotante-clase para grandes botones flotantes:

+ +

Ejemplo

<a class="w3-btn-floating-large w3-teal">+</a>
<a class="w3-btn-floating-large w3-disabled">+</a>
Inténtalo tú mismo "