Типографикаtypographylinkgradient

Gradient Link

Ссылка с анимированным градиентным подчеркиванием при наведении.

Использование

Скопируйте и вставьте этот код в ваш React-компонент:

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

<GradientUnderlineLink>Content</GradientUnderlineLink>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: 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; }

Краткая информация

Категория: Типографика
Имя файла: GradientUnderlineLink.tsx
Зависимости: Нет — чистый React + CSS
Теги: typographylinkgradient

Живое превью

Использование

Ручная установка

Краткая информация