Botones

Ejemplos
Uso

Botones sólidos


<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-lighter">Lighter</button>

<button type="button" class="btn btn-white">White</button>

<button type="button" class="btn btn-dark">Dark</button>

Botones de contorno


<button type="button" class="btn btn-outline-primary">Primary</button>

<button type="button" class="btn btn-outline-secondary">Secondary</button>

<button type="button" class="btn btn-outline-success">Success</button>

<button type="button" class="btn btn-outline-danger">Danger</button>

<button type="button" class="btn btn-outline-warning">Warning</button>

<button type="button" class="btn btn-outline-info">Info</button>

<button type="button" class="btn btn-outline-light">Light</button>

<button type="button" class="btn btn-outline-lighter">Lighter</button>

<button type="button" class="btn btn-outline-white">White</button>

<button type="button" class="btn btn-outline-dark">Dark</button>

Botones con iconos


<button type="button" class="btn btn-primary btn-text-icon">Primary <span class="icon-add"></span></button>

<button type="button" class="btn btn-secondary btn-text-icon">Secondary <span class="icon-add"></span></button>

<button type="button" class="btn btn-success btn-text-icon">Success <span class="icon-add"></span></button>

<button type="button" class="btn btn-danger btn-text-icon">Danger <span class="icon-add"></span></button>

<button type="button" class="btn btn-warning btn-text-icon">Warning <span class="icon-add"></span></button>

<button type="button" class="btn btn-info btn-text-icon">Info <span class="icon-add"></span></button>

<button type="button" class="btn btn-light btn-text-icon">Light <span class="icon-add"></span></button>

<button type="button" class="btn btn-lighter btn-text-icon">Lighter <span class="icon-add"></span></button>

<button type="button" class="btn btn-white btn-text-icon">White <span class="icon-add"></span></button>

<button type="button" class="btn btn-dark btn-text-icon">Dark <span class="icon-add"></span></button>


<button type="button" class="btn btn-primary btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-secondary btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-success btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-danger btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-warning btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-info btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-light btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-lighter btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-white btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-dark btn-icon"><span class="icon-add"></span></button>


<button type="button" class="btn btn-outline-primary btn-text-icon">Primary <span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-secondary btn-text-icon">Secondary <span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-success btn-text-icon">Success <span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-danger btn-text-icon">Danger <span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-warning btn-text-icon">Warning <span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-info btn-text-icon">Info <span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-light btn-text-icon">Light <span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-lighter btn-text-icon">Lighter <span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-white btn-text-icon">White <span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-dark btn-text-icon">Dark <span class="icon-add"></span></button>


<button type="button" class="btn btn-outline-primary btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-secondary btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-success btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-danger btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-warning btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-info btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-light btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-lighter btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-white btn-icon"><span class="icon-add"></span></button>

<button type="button" class="btn btn-outline-dark btn-icon"><span class="icon-add"></span></button>

Botones tipo enlace


<button type="button" class="btn btn-link text-dark">Link dark</button>

<button type="button" class="btn btn-link text-dark btn-text-icon">Link dark <span class="icon-arrow-forward"></span></button>

Enlace

Soy un enlace


<a href="#">Soy un enlace</a>

Este enlace no debe llevar ninguna clase para que mantenga su estilo.

Tamaños


<button type="button" class="btn btn-primary btn-lg">Primary large</button>

<button type="button" class="btn btn-primary btn-text-icon btn-lg">Primary large <span class="icon-add"></span></button>

<button type="button" class="btn btn-primary btn-icon btn-lg"><span class="icon-add"></span></button>

<button type="button" class="btn btn-primary btn-sm">Primary Small</button>

<button type="button" class="btn btn-primary btn-text-icon btn-sm">Primary Small <span class="icon-add"></span></button>

<button type="button" class="btn btn-primary btn-icon btn-sm"><span class="icon-add"></span></button>

<button type="button" class="btn btn-primary btn-block">Primary block</button>

Estado active


<button type="button" class="btn btn-primary active">Primary</button>

<button type="button" class="btn btn-secondary active">Secondary</button>

<button type="button" class="btn btn-outline-primary active">Primary</button>

<button type="button" class="btn btn-outline-secondary active">Secondary</button>

Estado disabled


<button type="button" class="btn btn-primary disabled">Primary</button>

<button type="button" class="btn btn-secondary disabled">Secondary</button>

<button type="button" class="btn btn-outline-primary disabled">Primary</button>

<button type="button" class="btn btn-outline-secondary disabled">Secondary</button>

Botón primario

El botón primario será usado sólo en casos donde el usuario realice una ación de primera importancia, relacionadas con vivir una experiencia. Puede ser:

Registrarse
Comprar
Comenzar una sesión
Prueba gratis

A nivel sintáctico, tiene la clase btn-primary, pero su uso, como hemos definido más arriba será esclusivo de acciones relacionadas con vivir la experiencia Bkool.

Botón secundario

El botón secundario (a nivel sintáctico le hemos llamado con la clase `btn-secondary`) será usado como botón de segunda importancia tras el primario. Es un botón para realizar acciones vinculadas con resolver problemas de la interfaz de usuario de alto nivel. Podrá estar acompañado de otro botón copn referencia a otra acción de menor importancia.

El botón secundario podrá estar acompañado, además, de un alter-ego, que realice una acción complementaria:

Guardar-Cancelar
Descargar-Ir a otra página

La acción de mayor importancia irá siguiendo el orden de lectura de izquierda a derecha.

Sobre fondos o imágenes de color oscuro, el botón btn-secondary se sustituirá por un botón sólido de color blanco btn-white