Botón predeterminado:
```html
Predeterminado
```
Esto crea un botón azul predeterminado.
Botones de colores personalizados:
Para crear botones con diferentes colores, puede usar las clases `btn-{color}`, donde `{color}` se puede reemplazar con uno de los siguientes:
- primario
- secundaria
- éxito
- peligro
- advertencia
- información
- luz
- oscuro
Por ejemplo, para crear un botón rojo:
Peligro
Botones de esquema:
Para crear botones de esquema, use las clases `btn-outline-{color}`. Por ejemplo, para crear un botón rojo delineado:
Botones deshabilitados:
Para deshabilitar un botón, agréguele el atributo "deshabilitado".
Deshabilitado
Tamaños de botones:
También puedes cambiar el tamaño de los botones usando las clases `btn-{size}`, donde `{size}` puede ser uno de los siguientes:
- pequeño (pequeño)
- lg (grande)
Por ejemplo, para crear un botón pequeño:
Pequeño
Estilo personalizado:
Puede personalizar aún más la apariencia de los botones agregándoles estilos CSS personalizados.
Aquí hay una tabla que resume las clases de botones Bootstrap 5 y sus efectos:
| Clase | Efecto |
|---|---|
| `btn` | Crea un botón básico. |
| `btn-primario` | Crea un botón azul. |
| `btn-secundario` | Crea un botón gris. |
| `btn-éxito` | Crea un botón verde. |
| `btn-peligro` | Crea un botón rojo. |
| `btn-advertencia` | Crea un botón amarillo. |
| `btn-info` | Crea un botón azul claro. |
| `btn-luz` | Crea un botón blanco. |
| `btn-oscuro` | Crea un botón negro. |
| `btn-esquema-{color}` | Crea un botón de contorno en el color especificado. |
| `btn-{tamaño}` | Cambia el tamaño del botón. |
Puede combinar varias clases para crear estilos de botones más complejos. Por ejemplo, el siguiente código crea un pequeño botón rojo delineado:
