mirror of
https://github.com/tachyons-css/tachyons.git
synced 2026-02-06 17:46:45 +00:00
1.4 KiB
1.4 KiB
export const meta = { title: 'Links / Elements / Docs / TACHYONS', modules: ['tachyons-links'], subNav: 'elements', editUrl: 'https://github.com/tachyons-css/tachyons/edit/master/docs/elements/links.md' }
Links
Tachyons doesn’t style links by default, but provides the necessary classes to generate a wide variety of link styles.
Example
Underline links and animate to color
To keep the default underline, but animate the color transition, combine classes from skins and skins-pseudo.
<a href="#" class="link underline blue hover-orange">link text</a>
Underline on hover
To add an underline on hover and focus, use the class underline-hover.
<a href="#" class="link underline-hover red">link text</a>
Dim on hover
To dim a link on hover, add the dim class.
<a href="#" class="dim">link text</a>
Add background color on hover
You can add any background color from the skins-pseudo module.
<a href="#" class="link black hover-bg-light-blue">link text</a>
Animate background color on hover
You can add any background color from the skins-pseudo module.
<a href="#" class="link black bg-animate hover-bg-light-blue">link text</a>