Los botones son de los elementos más utilizados dentro de
un sitio o aplicación web, sujetos casi siempre a disparar eventos
trascendentes del usuario para generar los resultados a través de procesos. Es por ello,
que es importante para todo fron-end disponer de herramientas que permitan la correcta visualización
de este elemento.
Botón por default
El siguiente ejemplo es un botón por defecto, no dispone de efecto hover
aunque solo es necesario agregar la clase .btn.
el botón desactivado anula todos los estilos aplicados y funcionabilidad del botón,
la clase .desactivado puede aplicarse a cualquier
botón descripto en este documento.
Botones coloreados
Para definirle el color a los botones y incorporar de manera automática el efecto
hover (cuando el usuario pasa con el cursor por encima del elemento) tendremos que utilizar
los colores de fondo provistos por Bodystyle
si aún no a pasado por esa sección lo anterior es un enlace que lo dirigirá directamente.
En este caso fué utilizado la clase .fd-rojo
pero pueden agregarle cualquier
clase referente a los colores de fondo, además
se va a incorporar el efecto hover con esta disposición.
Formato: fd-[colores].
Paleta de Botones
A continuación se muestra una grilla de colores, con las posibilidades y potencia de
la biblioteca para cargar botones de multiplicidad de colores y estilos.
Tamaños
La biblioteca cuenta con tres tamaños para definir los estilos de los
botones.
La forma de colorear y agregar el efecto hover a los botones igual que lo documentado
en la sección anterior, simplemente le agregamos al botón un color de fondo a partir de la paleta definida
en la sección colores .
Efecto Wawes
Un efecto que se dispara cuando se hace click al botón añadiendo
dinámicamente un elemento que muestra el efecto.
Para poder utilizar este efecto tenemos que incorporar el archivo
de Bodystyle JS.
En este caso se puede utilizar el archivo de desarrollo o el archivo de
producción de la siguiente manera:
Con solo añadir lo que se encuestra en el código anterior ya disponemos
del efecto sin tener que instanciarlo. Esto se debe a que este módulo se
inicia de manera automática.
Para más información consultar la página
Get Started.
Aplicación del efecto
Colores del efecto
Podemos definir colores para el elemento dinámico que se añade
para mostrar el efecto. Los colores disponibles son los que dispone la biblioteca a partir
de las clases correspondientes a
colores de fondo.
Para cambiarle el color lo hacemos a través del atributo
data-color.
Botones Outline
La biblioteca incluye otro tipo de botón con el fondo transaparente y definido
visualmente por sus bordes, en la nueva versión se incluyeron alias
para aumentar las posibilidades e intentar integrar a Bodystyle con el lenguaje inglés.
Alias para los Botones
Colores
Español
Inglés
Color
btn-verde-o
btn-green-o
btn-rojo-o
btn-red-o
btn-blanco-o
btn-white-o
btn-negro-o
btn-black-o
btn-azul-o
btn-blue-o
Definición
Español
Inglés
btn-cubrir-o
btn-cover-o
btn-cubrir-sm-o
btn-cover-sm-o
btn-cubrir-lg-o
btn-cubrir-lg-o
Ejemplo
Ejemplo 100%
Integración con Otros Elementos
Hasta el momento utilizamos los estilos de los botones en la
etiqueta button pero la biblioteca
permite establecer los mismos estilos a otros elementos.
Para utilizar el dropdown en los botones primero tenemos que iniciar el módulo correspondiente
al elemento dinámico utilizado en este esjemplo.
En el aprtado correspondiente se explicará en detalle el funcionamiento del dropdown, pero
para exclarecer el ejemplo es necesario agregarle al
disparador la clase
.dropdown-toggle, luego
hay que añadirtle un atributo .data-target al elemento que permitirá el acceso
a la lista que desplegará cuando se dispare el evento referenciando el ID de la lista.
Por último creamos una lista de la siguiente manera:
Esta es una utilidad de bordes que se aplica a algunos elementos html
y lograr que los extremos del elemento queden completamente redondeados. La clase
utilizada es bor-pill.