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.