Destello

Botón oscuro con un destello que lo cruza cada tanto y al pasar el cursor, encendiendo a la vez el relleno, el borde y el texto.

Vista previa en vivo

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { GlintButton } from "furin";

También con pnpm add furin, yarn add furin o bun add furin. Cada componente trae su CSS y lo importa por ti.

Prop	Tipo	Por defecto	Descripción
children	ReactNode	"Comenzar"	Texto del botón.
color	string	"#16171c"	Color del cuerpo del botón.
glintColor	string	"#ffffff"	Color del destello.
interval	number	3.8	Cada cuántos segundos pasa el destello solo (0 = solo al pasar el cursor).
speed	number	1	Segundos que tarda el destello en cruzar.
angle	number	105	Inclinación del destello, en grados.
arrow	boolean	true	Muestra una flecha al final del texto.
height	number	60	Alto del botón, en px.

Mantener para confirmar
Gratis
Mantén presionado para confirmar: un anillo se llena, el botón tiembla cada vez más y al completar vibra. Con ratón, toque o teclado.
Botones
Onda
Gratis
Botón cuya onda nace exactamente donde haces clic: un frente luminoso con anillos que cubre hasta la esquina más lejana.
Botones
Botón líquido
Pro
Botón que se llena de líquido desde el punto exacto por donde entra el cursor, con borde de menisco y burbujas de luz, y se vacía hacia donde sale.
Botones