Botones

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>

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