Botones de Foundation
Estilos de botones
Foundation proporciona 6 estilos de botones..buttonLa clase crea un botón azul con espacio interior. Las clases de botones de diferentes colores son:.secondary, .success, .info, .warningo.alert:
Ejemplo
<button type="button" class="button">Default</button>
<button type="button" class="button secondary">Secondary</button>
<button type="button" class="button success">Success</button>
<button type="button" class="button info">Info</button>
<button type="button" class="button warning">Warning</button>
<button type="button" class="button alert">Alert</button>
<button type="button" class="button secondary">Secondary</button>
<button type="button" class="button success">Success</button>
<button type="button" class="button info">Info</button>
<button type="button" class="button warning">Warning</button>
<button type="button" class="button alert">Alert</button>
Pruébalo »
Las clases de botones se pueden usar en<a>, <button>, o<input>elementos:
Ejemplo
<a href="#" class="button info" role="button">Link Button</a>
<button type="button" class="button info">Button</button>
<input type="button" class="button info" value="Input Button">
<input type="submit" class="button info" value="Submit Button">
<button type="button" class="button info">Button</button>
<input type="button" class="button info" value="Input Button">
<input type="submit" class="button info" value="Submit Button">
Pruébalo »
 |
¿Por qué establecer el href de la etiqueta a en #? Cuando no queremos que el enlace salte al hacer clic y obtenga una página "404", podemos establecer el href de la etiqueta a en #. |
|---|
Tamaño de botones
Podemos usar.large, .smallo.tinyla clase para establecer el tamaño del botón:
Ejemplo
<button type="button" class="button large">Large</button>
<button type="button" class="button">Default</button>
<button type="button" class="button small">Small</button>
<button type="button" class="button tiny">Tiny</button>
<button type="button" class="button">Default</button>
<button type="button" class="button small">Small</button>
<button type="button" class="button tiny">Tiny</button>
Pruébalo »
Botones redondeados
Se puede usar.radiusy.roundla clase para establecer botones redondeados:
Ejemplo
<button type="button" class="button">Default Button</button>
<button type="button" class="button radius">Radius Button</button>
<button type="button" class="button round">Round Button</button>
<button type="button" class="button radius">Radius Button</button>
<button type="button" class="button round">Round Button</button>
Pruébalo »
Botones expandidos
Se puede usar.expandla clase para establecer el ancho del botón al 100%:
Ejemplo
<button type="button" class="button">Default Button</button>
<button type="button" class="button expand">Expanded Button</button>
<button type="button" class="button expand">Expanded Button</button>
Pruébalo »
Botones deshabilitados
Se puede usar.disabledla clase para hacer que el botón no sea clicable:
Ejemplo
<button type="button" class="button">Default Button</button>
<button type="button" class="button disabled">Disabled Button</button>
<button type="button" class="button disabled">Disabled Button</button>
Pruébalo »