Los botones en bootstrap 5 son un componente con el cual podemos presentar opciones, menus y mucho mas, cuenta con diferentes colores, tamaños, borders y todo se puede mezclar.
Los botones en Bootstrap y em muchos otros frameworks css son muy importantes ya que sirven para los enlaces, los botones en los formularios y cualquier usa que se le quiera dar.
Los primero que tenemos que hacer para usar los botones de bootstrap 5 , claro, descargar bootstrap 5, desde la pagina oficial https://getbootstrap.com/
Una vez descargado e incluido en nuestro documento html vamos a crear nuestro primer boton.
<a href="https://google.com" class="btn btn-secondary">Mi Boton</a>
Como puedes ver el componente, se usa la etiqueta de enlaces, tambien se puede usar el elemento button.
<button class="btn btn-secondary">Mi Boton</button>
Podemos ver el resultado en cambos casos es similar.
Colores de Botones
La clase “btn” nos inicializa el componente boton y la clase “btn-secondary” nos dice el color en este caso es secondary color gris, existen otros colores.
- btn-secondary
- btn-primary
- btn-success
- btn-danger
- btn-warning
- btn-info
- btn-light
- btn-link
En codigo.
<a href="" class="btn btn-secondary">btn-secondary</a> <a href="" class="btn btn-primary">btn-primary</a> <a href="" class="btn btn-success">btn-success</a> <a href="" class="btn btn-danger">btn-danger</a> <a href="" class="btn btn-warning">btn-warning</a> <a href="" class="btn btn-info">btn-info</a> <a href="" class="btn btn-light">btn-light</a> <a href="" class="btn btn-dark">btn-dark</a> <a href="" class="btn btn-link">btn-link</a>
Y los podemos ver asi.
Botones Outline
Los anteriores son Botones 100% rellenos de color.tambien bootstrap 5 cuenta con botones que solo tienen el border coloreado y cuando pasamos el mouse sobre el boton este se rellena de color.
Estos son los outline buttons y se pueden poner agregandole a la clase del color el prefijo btn-outline-color por ejemplo.
- btn-outline-secondary
- btn-outline-success
- btn-outline-danger
- btn-outline-warning
- btn-outline-info
- btn-outline-light
- btn-outline-link
<a href="" class="btn btn-outline-secondary">btn-secondary</a> <a href="" class="btn btn-outline-primary">btn-primary</a> <a href="" class="btn btn-outline-success">btn-success</a> <a href="" class="btn btn-outline-danger">btn-danger</a> <a href="" class="btn btn-outline-warning">btn-warning</a> <a href="" class="btn btn-outline-info">btn-info</a> <a href="" class="btn btn-outline-light">btn-light</a> <a href="" class="btn btn-outline-dark">btn-dark</a> <a href="" class="btn btn-outline-link">btn-link</a>
Y el resultado es el siguiente:
Tamaños de botones
Tambien existen 3 tamaños que se pueden agregar a las clases, las clases son
- btn-sm: Small o Chico
- btn-md: Mediano por default no es necesario agregarlo
- btn-lg: Large o boton grande
En codigo.
<a href="" class="btn btn-outline-primary btn-sm">btn-primary btn-sm</a> <a href="" class="btn btn-outline-primary ">btn-primary </a> <a href="" class="btn btn-outline-primary btn-lg">btn-primary btn-lg</a>
El resultado
Los colores y los tamaños se pueden combinar para obtener resultados personalizados.