blob: f75cae42751c1caa7fdf8e5b517fe0c0e2aca236 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
---
layout: docs
title: Colored links
description: Colored links with hover states
group: helpers
toc: false
---
You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors#colors" >}}), these classes have a `:hover` and `:focus` state.
{{< example >}}
{{< colored-links.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<a href="#" class="link-{{ .name }}">{{ .name | title }} link</a>
{{- end -}}
{{< /colored-links.inline >}}
{{< /example >}}
|
