Tipografíatypographylinknavigation
Smart Underline Link
Enlace interactivo con animación de subrayado expansivo que nace desde el centro.
Vista Previa en Vivo
Uso
Copia y pega este código directamente en tu componente React:
tsx
import { AnimatedUnderlineLink } from 'react-component-kit-ui/typography';
<AnimatedUnderlineLink href="#">Content</AnimatedUnderlineLink>Instalación Manual
Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/AnimatedUnderlineLink.tsx + AnimatedUnderlineLink.css:
AnimatedUnderlineLink.tsx
'use client';
import type { ReactNode } from 'react';
import './AnimatedUnderlineLink.css';
/** AnimatedUnderlineLink — ported from astro-component-kit. */
export interface AnimatedUnderlineLinkProps {
href: string;
children?: ReactNode;
}
export function AnimatedUnderlineLink({ href,
children
}: AnimatedUnderlineLinkProps) {
return (
<>
<a href={href} className="smart-link" data-rk-8961c9="">{children}</a>
</>
);
}
export default AnimatedUnderlineLink;AnimatedUnderlineLink.css
/* AnimatedUnderlineLink — ported from astro-component-kit (typography/AnimatedUnderlineLink.astro) */
.smart-link:where([data-rk-8961c9]) { color: #818cf8; text-decoration: none; position: relative; font-weight: 600; padding: 2px 0; }
.smart-link:where([data-rk-8961c9])::after { content: ""; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: #6366f1; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.smart-link:hover:where([data-rk-8961c9])::after { width: 100%; left: 0; }Información Rápida
- Categoría
- Tipografía
- Nombre de archivo
AnimatedUnderlineLink.tsx- Dependencias
- Ninguna — React + CSS puro
- Etiquetas
- typographylinknavigation