Vibeset

Botón de cristal

Un botón que parece una pieza de vidrio tallado, con una luz que se mueve según donde pongas el puntero. Es CSS con un detalle de JavaScript: dos números. El puntero escribe su posición dentro del botón en dos variables y nada más. El brillo de la cara es un degradado radial centrado ahí; el del canto es otro degradado puesto como fondo del borde, con dos capas de fondo (padding-box para la cara, border-box para el filo) y un borde transparente: no hay elementos extra ni bucle. Sin puntero la luz vuelve a un reposo arriba y en medio, de donde cae una lámpara, así que nunca se ve plano. Pulsado se hunde un píxel con :active, que cubre ratón, dedo y Espacio. Es un button o un a de verdad, y con colores forzados se vuelve el botón del sistema.

Y el original de React Bits: Specular Button

Esta pieza está escrita desde cero en Vibeset: no se ha copiado ni portado nada de React Bits. Hace algo parecido a su Specular Button, y esto es lo que vimos del suyo por si prefieres usar el original.

Cuándo sí

Para la llamada a la acción principal de una portada, una sola. Sobre un fondo oscuro o con color detrás, donde el cristal se nota.

Ojo con

Cada botón lleva su propio canvas WebGL: dos o tres, bien; veinte, no.

Accesibilidad

Respeta el movimiento reducido del sistema y acepta los atributos de un button, así que el nombre accesible y el tipo los controlas tú.