Cómo crear un kit de interfaz de usuario de botones

El tema para la semana # 6 del Reto de codificación semanal es:

Botones

"¿Un botón? ”podrías preguntar ... ¡Sí! ¡Un botón!

"¿Pero por qué?"

Porque un botón es uno de los componentes básicos de cualquier sitio web / aplicación web. Ya sea que esté en Facebook o Twitter o Google, etc., siempre encontrará un botón que le permita interactuar con la aplicación de alguna manera. Así que esta semana vamos a construir botones, ¡muchos botones!

Si desea participar en el Desafío, siéntase libre de construir cualquier tipo de botones: botones 3D, botones con efecto dominó, botones de animación, etc. - el cielo es el límite . ¡Ser creativo! ¡Sabes cuánto valoro la creatividad!

En este artículo, crearemos varios botones y los colocaremos en un Kit de interfaz de usuario de botones:

Antes de pasar a la parte de implementación, veamos los diferentes estados en los que un botón puede ser:

  1. Estado predeterminado
  2. Estado de desplazamiento: cuando el mouse está sobre el botón
  3. Estado activo: cuando se presiona el botón
  4. Estado de enfoque: cuando el botón está resaltado. Permitido en elementos que aceptan eventos de teclado. Esto se usa para dar a los usuarios que solo usan el teclado alguna orientación mientras atraviesan la aplicación.
  5. Estado desactivado

Necesitamos diseñar los botones para cubrir todos estos estados.

Además, tendremos tres tipos de botones diferentes: primario, secundario y terciario y dos tamaños adicionales: grande y pequeño.

El HTML

Estamos usando clases para diferenciar entre los diferentes tipos de botones.

El CSS

.btn es la clase principal utilizada por todos nuestros botones:

️ Algunos estilos generales para que se vea mejor que la versión predeterminada.

A continuación, tenemos los diferentes estados:

Para tener alguna diferencia entre los estados, podemos jugar con la propiedad de opacidad.

Inicialmente, el botón tiene opacidad: 1 y reducimos esa opacidad ligeramente cuando pasamos el cursor sobre el botón y luego un poco más cuando el botón está desactivado. Sin embargo, cuando hacemos clic en el botón, volveremos a establecer la opacidad en 1, ya que da un buen efecto.

Para el estado de enfoque, eliminamos la propiedad de contorno predeterminada y agregaremos una propiedad de sombra de cuadro en su lugar, pero haremos esto por separado para cada tipo de botón porque el color cambia según la clase (ver más abajo).

Los colores individuales se establecen en las clases .btn-primary, .btn-secundario y .btn-terciaria:

Como puede ver, usamos el método de variables CSS para establecer el mismo color en diferentes propiedades. Pero para que esto funcione, debemos declarar las variables de color en: root de la siguiente manera:

Tenga en cuenta que es una buena práctica agregar la declaración: root en la parte superior del archivo css.

Por último, agreguemos los dos tamaños adicionales; Clases .btn-large y .btn-small:

Conclusión

¿Ves lo fácil que es crear un Kit de interfaz de usuario de botones?

Como características adicionales, puede agregar un efecto dominó a los botones a través de JavaScript. Hice esto en un artículo anterior. ¡Puede consultarlo haciendo clic aquí!

¡Espero que les haya gustado este desafío y no puedo esperar a ver qué van a crear!

¡Feliz codificación!

Originalmente publicado en www.florin-pop.com.