1 звезда на GitHub = 1 новый компонент.

Поставить звезду

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

Gradient Link

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

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

Скопируйте и вставьте этот код на вашу страницу Astro:

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

<GradientUnderlineLink>Content</GradientUnderlineLink>

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

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

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

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