Botones

Sliding send button

Sliding send button: Un botón de envío plano que se desliza hacia la derecha al pasar el mouse mientras se abre el espacio entre su etiqueta y la flecha, retrocede unos pocos píxeles al presionarlo y vuelve a colocarse al salir.

Cómo usar Sliding send button

Sliding send button se presenta con el formato de vista previa «en línea» y el tema «claro/oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

Control	Tipo	Valor inicial	Límites de la vista previa
`label`	`text`	`Send`	Hasta 20 caracteres
`accent`	`color`	`#38BDF8`	Los metadatos no indican otro límite.
`travel`	`number`	`12`	De 0 a 24; paso 1
`tracking`	`number`	`1`	De 0 a 3; paso 0.1

¿Para qué frameworks está disponible Sliding send button?

Sliding send button está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Sliding send button?

Los metadatos de React indican estas dependencias npm además de React: motion.

¿Qué detalles de accesibilidad se observan en Sliding send button?

El código React de Sliding send button incluye: atributos y manejadores (aria-hidden). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Sliding send button el movimiento reducido?

Sliding send button consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Gap stretch arrow button de Fieldbook, de la categoría Botones.

2585Gap stretch arrow buttonBotonesUna pastilla de ancho fijo cuya flecha se desplaza hasta el borde más alejado al pasar el mouse, ampliando el espacio después de una etiqueta estacionaria, con una copia tenue del rastro siguiendo un ritmo detrás.

Imagen fija del componente Arrow wipe call to action de Fieldbook, de la categoría Botones.

1629Arrow wipe call to actionBotonesUna llamada a la acción cuya placa más oscura aparece desde la izquierda al pasar el mouse mientras una flecha escondida se desliza hacia afuera para encontrarse con la etiqueta y empuja un píxel hacia abajo cuando se hace clic.

Imagen fija del componente Breathing Inset Button de Fieldbook, de la categoría Botones.

2579Breathing Inset ButtonBotonesUn botón moldeado pálido cuyo panel interior se aleja del borde al pasar el mouse mientras el glifo de envío se desliza una corta distancia hacia la etiqueta.

2580Overshoot icon buttonBotonesUna pastilla pálida con un gran glifo ilustrado estacionado en su extremo izquierdo que tira hacia afuera más allá del borde y regresa al flotar o enfocar.

Imagen fija del componente Slide under download button de Fieldbook, de la categoría Botones.

2513Slide under download buttonBotonesUn botón etiquetado que desliza una bandeja de acción brillante fuera de su placa al pasar el mouse o enfocar, con una flecha de descarga oscilante dentro de la bandeja.

Imagen fija del componente Sliding fill send pill de Fieldbook, de la categoría Botones.

2564Sliding fill send pillBotonesUna pastilla de contorno ancho con un disco sólido en un extremo; desliza los portaobjetos que llenan toda la pastilla y voltea la etiqueta a medida que pasa.