Botones Bootstrap 4
Bootstrap 4 ofrece botones de diferentes estilos.
Ejemplo
<button type="button" class="btn">Botón básico</button>
<button type="button" class="btn btn-primary">Botón principal</button>
<button type="button" class="btn btn-secondary">Botón secundario</button>
<button type="button" class="btn btn-success">Éxito</button>
<button type="button" class="btn btn-info">Información</button>
<button type="button" class="btn btn-warning">Advertencia</button>
<button type="button" class="btn btn-danger">Peligro</button>
<button type="button" class="btn btn-dark">Negro</button>
<button type="button" class="btn btn-light">Claro</button>
<button type="button" class="btn btn-link">Enlace</button>
Pruébalo »
Las clases de botones se pueden usar en<a>, <button>, o<input>elementos:
Ejemplo
<a href="#" class="btn btn-info" role="button">Botón de enlace</a>
<button type="button" class="btn btn-info">Botón</button>
<input type="button" class="btn btn-info" value="Botón de entrada">
<input type="submit" class="btn btn-info" value="Botón de enviar">
Pruébalo »
Botones con borde
Ejemplo
<button type="button" class="btn btn-outline-primary">Botón principal</button>
<button type="button" class="btn btn-outline-secondary">Botón secundario</button>
<button type="button" class="btn btn-outline-success">Éxito</button>
<button type="button" class="btn btn-outline-info">Información</button>
<button type="button" class="btn btn-outline-warning">Advertencia</button>
<button type="button" class="btn btn-outline-danger">Peligro</button>
<button type="button" class="btn btn-outline-dark">Negro</button>
<button type="button" class="btn btn-outline-light text-dark">Claro</button>
Pruébalo »
Botones de diferentes tamaños
Bootstrap 4 permite configurar el tamaño de los botones:
Ejemplo
<button type="button" class="btn btn-primary btn-lg">Botón grande</button>
<button type="button" class="btn btn-primary">Botón predeterminado</button>
<button type="button" class="btn btn-primary btn-sm">Botón pequeño</button>
Pruébalo »
Botones a nivel de bloque
Al agregar la.btn-blockclase se pueden configurar botones a nivel de bloque:
Botones activados y deshabilitados
Los botones pueden configurarse como activados o deshabilitados.
.activeLa clase puede configurar el botón como activo,disabledEl atributo puede configurar el botón como no clicable. Nota: el elemento <a> no admite el atributo disabled, puedes agregar.disabledla clase para deshabilitar el clic en el enlace.
Ejemplo
<button type="button" class="btn btn-primary active">Botón activo</button>
<button type="button" class="btn btn-primary" disabled>Botón deshabilitado</button>
<a href="#" class="btn btn-primary disabled">Enlace deshabilitado</a>
Pruébalo »
Botón de carga
También podemos configurar un botón que esté cargando.
Ejemplo
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
Pruébalo »