Bootstrap 4 - Estilos para botones III

Con esta tercera parte terminamos con el tema de los botones de Bootstrap. 

Botones con ancho automático - Bootstrap 4

En ocasiones, puedes necesitar un botón que cubra todo el ancho de un elemento.
Veamos algún ejemplo:

<button type="button" class="btn btn-danger btn-block">Botón de ancho automático</button>

Este ejemplo, está puesto con la clase btn-danger, no obstante, puedes utilizar los otros estilos que hemos visto anteriormente (primary, secondary, warning...).

<button type="button" class="btn btn-primary btn-block">Botón de ancho automático</button>

<button type="button" class="btn btn-secondary btn-block">Botón de ancho automático</button>

<button type="button" class="btn btn-success btn-block">Botón de ancho automático</button>

<button type="button" class="btn btn-danger btn-block">Botón de ancho automático</button>

<button type="button" class="btn btn-warning btn-block">Botón de ancho automático</button>

<button type="button" class="btn btn-info btn-block">Botón de ancho automático</button>

<button type="button" class="btn btn-dark btn-block">Botón de ancho automático</button>

<button type="button" class="btn btn-light btn-block">Botón de ancho automático</button>

Este estilo de botón se queda pegado al borde del elemento web en el cual lo pongas, recomiendo que le apliques un margen con la clase css margin.

Botones de carga (Spinner buttons) - Bootstrap 4

Bootstrap 4 también cuenta con botones animados de carga.
Estos botones los podemos poner en estilo activado en el que se hace un efecto al pasar el cursor sobre el botón y este cambia en forma de mano (como si se tratase de un enlace). El estilo activado, se puede escribir con enabled en la etiqueta button, no obstante, esto está establecido por defecto y no es necesario.
Los botones también se pueden poner con estilo desactivado, en el que el cursor, no cambia de forma al pasar sobre él. 
Por supuesto, el texto "Cargando..." es totalmente personalizable.

<!--PRIMARY SPINNER ENABLED -->

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Cargando...
</button>

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>

<button class="btn btn-primary">
  <span class="spinner-grow spinner-grow-sm"></span>
   Cargando...
</button>

<button class="btn btn-primary">
  <span class="spinner-grow spinner-grow-sm"></span>
</button>

<br>
<br>

<!--PRIMARY SPINNER DISABLED -->

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Cargando...
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
   Cargando...
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
</button>

<br>
<br>

En este ejemplo de código he puesto solo los estilos primary para no alargar tanto el capítulo. Podrás encontrar el resto de estilos en mi GitHub:

Todos los estilos Spinner Buttons

Bootstrap 4 - Estilos para botones I

Bootstrap 4 - Estilos para botones I

Los botones web son elementos fundamentales en el desarrollo de cualquier sitio web. Está claro que poner un botón básico con HTML es fácil, pero para diseñar unos estilos como los que verás a continuación, se necesita un poco de experiencia en CSS. Gracias a Bootstrap, tenemos a nuestro alcance una serie de elegantes botones.

Botones básicos de Bootstrap 4

<button type="button" class="btn btn-primary">Primario</button>
<button type="button" class="btn btn-secondary">Secundario</button>
<button type="button" class="btn btn-success">Éxito</button>
<button type="button" class="btn btn-danger">Peligro</button>
<button type="button" class="btn btn-warning">Advertencia</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Claro</button>
<button type="button" class="btn btn-dark">Oscuro</button>

Resultado

Botones link de Bootstrap 4

Aunque menos llamativos, tenemos los botones btn-link que cuentan con el texto subrayado como un enlace.

<button type="button" class="btn btn-primary btn-link">Primario</button>
<button type="button" class="btn btn-secondary btn-link">Secundario</button>
<button type="button" class="btn btn-success btn-link">Éxito</button>
<button type="button" class="btn btn-danger btn-link">Peligro</button>
<button type="button" class="btn btn-warning btn-link">Advertencia</button>
<button type="button" class="btn btn-info btn-link">Info</button>
<button type="button" class="btn btn-light btn-link">Claro</button>
<button type="button" class="btn btn-dark btn-link">Oscuro</button>
<button type="button" class="btn btn-link">Link</button>

Resultado

Esto es todo por el momento, en la siguiente entrega veremos más estilos para botones.