Onda

Botón cuya onda nace exactamente donde haces clic: un frente luminoso con anillos que cubre hasta la esquina más lejana.

Vista previa en vivo

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { RippleButton } 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	"Continuar"	Texto del botón.
color	string	"#3b4cf0"	Color del botón.
rippleColor	string	"#ffffff"	Color de la onda.
textColor	string	"#ffffff"	Color del texto.
duration	number	900	Milisegundos que dura la onda.
rings	number	2	Cuántos anillos tiene la onda (1 a 3).
radius	number	16	Radio de las esquinas, en px.
height	number	56	Alto del botón, en px.

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
Palanca metálica
Pro
Interruptor de palanca físico con clic.
Botones
Tecla mecánica
Pro
Tecla mecánica 3D con paredes inclinadas, plástico mate y luz de fondo; se hunde con rebote al presionar y puede sonar.
Botones