Botones

Center out underline link

Center out underline link: Un enlace de navegación cuyo subrayado crece hacia afuera desde el centro hasta ambos extremos al pasar el cursor y se retrae hasta un punto cuando el puntero se aleja.

Cómo usar Center out underline link

Center out underline link 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`	`Pricing`	Hasta 32 caracteres
`accent`	`color`	`#9BE15D`	Los metadatos no indican otro límite.
`thickness`	`number`	`2`	De 1 a 6; paso 1
`offset`	`number`	`4`	De 0 a 12; paso 1
`duration`	`number`	`400`	De 100 a 900; paso 25

¿Para qué frameworks está disponible Center out underline link?

Center out underline link 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 Center out underline link?

Los metadatos de React no indican dependencias npm adicionales a React.

¿Qué detalles de accesibilidad se observan en Center out underline link?

El código React de Center out underline link incluye: elementos nativos (a); 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 Center out underline link el movimiento reducido?

El análisis no encontró una consulta directa con useReducedMotion() o matchMedia en el archivo index.tsx de Center out underline link. 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 Caret tail link de Fieldbook, de la categoría Botones.

2508Caret tail linkBotonesUn enlace de texto silencioso con un pequeño corchete en ángulo justo después de su última letra, que se desliza hacia afuera y se subraya al pasar el mouse.

Imagen fija del componente Nudging chevron button de Fieldbook, de la categoría Botones.

2632Nudging chevron buttonBotonesUn botón silencioso y teñido con acento cuya marca de chevrón espera en el espacio negativo, luego se desliza al pasar el mouse y empuja la etiqueta hacia un lado mientras la paleta se enfría a neutrales.

Imagen fija del componente Opposing rule text button de Fieldbook, de la categoría Botones.

2537Opposing rule text buttonBotonesUn botón de texto en mayúsculas sin bordes entre corchetes por dos reglas que barren desde extremos opuestos al pasar el cursor o enfocar y retroceden por donde vinieron.

Imagen fija del componente Reversing bars menu button de Fieldbook, de la categoría Botones.

2413Reversing bars menu buttonBotonesUn pequeño mosaico de menú cuadrado cuyas tres barras apiladas intercambian anchos al pasar el mouse mientras el mosaico en sí se desvanece de un color de relleno a otro.

Imagen fija del componente Scribble Edit Chip de Fieldbook, de la categoría Botones.

2468Scribble Edit ChipBotonesUn chip de edición cuyo lápiz hace un garabato corto de un lado a otro al pasar el cursor mientras un subrayado tambaleante se dibuja debajo de la etiqueta y al hacer clic lo fija como el objetivo de edición activo.

Imagen fija del componente Stitched rule link button de Fieldbook, de la categoría Botones.

2552Stitched rule link buttonBotonesUn enlace de texto silencioso en mayúsculas con un galón que se mueve en un bucle en reposo; Pasar el cursor o enfocar mantiene el galón hacia adelante, amplía el seguimiento y borra una regla de acento cosida debajo de la etiqueta.