Typographytypographylinkgradient
Gradient Link
Link with animated gradient underline.
Live Preview
Usage
Copy and paste this code into your React component:
tsx
import { GradientUnderlineLink } from 'react-component-kit-ui/typography';
<GradientUnderlineLink>Content</GradientUnderlineLink>Manual Installation
If you are not using the npm package, create a new file and paste the following code: src/components/GradientUnderlineLink.tsx + GradientUnderlineLink.css:
GradientUnderlineLink.tsx
'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.css
/* 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; }Quick Info
- Category
- Typography
- Filename
GradientUnderlineLink.tsx- Dependencies
- None โ pure React + CSS
- Tags
- typographylinkgradient