Tipografíatypographylinkgradient

Gradient Link

Enlace elegante con línea de subrayado en degradado multicolor animada al interactuar.

Uso

Copia y pega este código directamente en tu componente React:

import { GradientUnderlineLink } from 'react-component-kit-ui/typography';

<GradientUnderlineLink>Content</GradientUnderlineLink>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/GradientUnderlineLink.tsx + GradientUnderlineLink.css:

'use client';

import type { ReactNode } from 'react';
import './GradientUnderlineLink.css';

/** GradientUnderlineLink — ported from astro-component-kit. */
export interface GradientUnderlineLinkProps {
  children?: ReactNode;
}

export function GradientUnderlineLink({ children }: GradientUnderlineLinkProps) {
  return (
    <>
      <a href="#" className="grad-link" data-rk-66205f="">{children}</a>
    </>
  );
}

export default GradientUnderlineLink;

/* GradientUnderlineLink — ported from astro-component-kit (typography/GradientUnderlineLink.astro) */

.grad-link:where([data-rk-66205f]) { text-decoration: none; color: #fff; border-bottom: 3px solid transparent; border-image: linear-gradient(135deg, #6366f1, #c084fc); border-image-slice: 1; padding-bottom: 2px; font-weight: 700; transition: 0.3s; }
.grad-link:hover:where([data-rk-66205f]) { opacity: 0.8; padding-bottom: 5px; }

Información Rápida

Categoría: Tipografía
Nombre de archivo: GradientUnderlineLink.tsx
Dependencias: Ninguna — React + CSS puro
Etiquetas: typographylinkgradient

Vista Previa en Vivo

Uso

Instalación Manual

Información Rápida