Estilos de botones en Bootstrap 5 | Explicado
Agregar colores a los botones
Puede agregar un color de fondo a los botones que no solo les agrega belleza, sino que también transmiten el propósito detrás del botón. Para hacerlo, puede usar cualquiera de estas clases dadas que son, .btn, .btn-primario, .btn-tucés, .btn-info, .BTN-SECUDARY, .BTN-Warning, .BTN-Danger, .btn-dark, .btn-luz.
Cómo agregar colores al botón usando Bootstrap 5
En el siguiente ejemplo, vamos a demostrar algunas de las clases mencionadas anteriormente.
Html
El código anterior genera tres botones, primero con un estilo básico, segundo que tiene un color de fondo verde e indica una acción positiva y la última que tiene un color de fondo azul y representa una acción importante. Observe que hemos usado el .Clase BTN Al diseñar cada botón porque esto le da cierto relleno al botón junto con un estilo básico.
Producción
Puedes probar otras clases para ver cómo diseñan los botones.
Botones como enlaces
También puede vincular otras páginas web o fuentes a botones en Bootstrap 5.
Cómo redirigir a un usuario a otra fuente usando el botón
Supongamos que desea redirigir a sus usuarios a otra fuente con un botón.
Html
EnlaceAquí simplemente puede proporcionar el enlace de la otra fuente al atributo HREF de la etiqueta de anclaje. Además, el botón creado en el fragmento de código anterior tendrá un color azul claro y un estilo básico.
Producción
Así es como puedes hacer botones como enlaces.
Botón de entrada
Además de las etiquetas de anclaje, también puede usar las clases de botones mencionadas anteriormente en las entradas también. Como sabe, la etiqueta puede hacer que algunos tipos, como enviar o restablecer,, por lo tanto, puede aplicar un estilo a cualquiera de estos tipos de entrada.
Cómo aplicar las clases de botones en las entradas
Así es como puede aplicar las clases de botones en las entradas.
Lo anterior generará tres tipos de botones de entrada con cada botón que tiene un color de fondo diferente.
Producción
De esta manera, puede aplicar clases asociadas con botones en varios tipos de entrada.
Dimensionamiento de botones
En algunos escenarios deseamos hacer botones ampliados, mientras tanto, en otros casos, queremos lo contrario. Usando las clases vinculadas a los tamaños de los botones, podemos lograr esta tarea.
Cómo cambiar los tamaños de botones en Bootstrap 5
Considere el ejemplo a continuación para comprender cómo hacer botones de varios tamaños.
Html
En el código anterior, estamos generando tres botones de tamaños pequeños, medianos y grandes respectivamente. Todos los botones también se les ha dado un cierto estilo.
Producción
Estos son botones de diferentes tamaños.
Botones de esbozación
También puede delinear sus botones usando el .btn-outline Clase en combinación con clases de color para diseñar sus botones.
Cómo dar el contorno a los botones en Bootstrap 5
Supongamos que desea delinear su botón usando Bootstrap 5 y luego siga el fragmento de código a continuación.
Lo anterior generará un botón con un contorno verde, además, cuando traiga el mouse sobre el botón, se aplicará un efecto de desplazamiento que le proporcionará un color de fondo correspondiente a la clase de color utilizada cada vez que se presente el mouse.
Producción
El botón ha recibido un esquema junto con un efecto de desplazamiento.
Botones activos y discapacitados
Para agregar belleza a su botón, puede agregar estados como activos o deshabilitados en sus botones o estilo los estados del botón.
Cómo hacer que un botón Diagrado en Bootstrap 5
Generemos dos botones, uno con un estado activo y el otro con un estado discapacitado.
Html
En el código anterior, el primer botón tiene un estilo básico junto con un fondo azul claro y un estado activo, mientras tanto, el segundo ha sido deshabilitado y tiene el mismo estilo que el primero. Además, ambos botones tienen color de texto blanco.
Producción
Estos son botones con los estados activos y discapacitados.
Botones a nivel de bloque
Con el fin de crear botones que ocupan todo el espacio horizontal, debe asignar el .grida d Clase al Div que contiene el elemento del botón, mientras tanto, asigne el .bloqueo de btn clase al elemento de botón.
Cómo crear un botón de nivel de bloque usando Bootstrap 5
Creemos un botón a nivel de bloque.
Html
Aquí estamos generando un botón de ancho completo usando el .clase d-grida en el elemento principal que lo hace extender todo el ancho del elemento principal.
Producción
La salida anterior muestra un botón de nivel de bloque.
Conclusión
Los botones se pueden diseñar de varias maneras utilizando las diversas clases de Bootstrap 5 asociadas con botones. Por ejemplo, puede agregar colores a botones utilizando clases como .btn-primario, .btn-tucés, .btn-info, etc. Además, puede usar otras clases disponibles para hacer botones como enlaces, darles un cierto tamaño, un esquema o hacerlas a nivel de bloque. Este blog discute varios estilos que puede proporcionar a los botones usando Bootstrap 5.