Typography typographylinkgradient

Gradient Link

Interactive link with a multi-color gradient underline.

Usage

Copy the full block below to use this component with its imports.

---
import { GradientLink } from 'astro-component-kit';
---

<GradientUnderlineLink>Content</GradientUnderlineLink>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/GradientLink.astro and paste the following code:

---
---
<a href="#" class="grad-link"><slot /></a>
<style>
  .grad-link { 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 { opacity: 0.8; padding-bottom: 5px; }
</style>

Quick Info

Category: Typography
Filename: GradientLink.astro
Dependencies: None — pure Astro + CSS
Tags: typographylinkgradient