Typography typographylinkgradient
Gradient Link
Interactive link with a multi-color gradient underline.
Preview
Usage
Copy the full block below to use this component with its imports.
astro
---
import { GradientLink } from 'astro-component-kit';
---
<GradientUnderlineLink>Content</GradientUnderlineLink> ---
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:
astro
---
---
<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> ---
---
<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