Examples

Underline links and animate to color

To keep the default underline, but animate the color transition, combine classes from skins and skins-pseudo.

Underline on hover

To add an underline on hover and focus, use the class 'underline-hover'.

Dim on hover

To dim a link on hover, add the dim class.

Add background color on hover

You can add any background color from the skins-pseudo module.

Animate background color on hover

You can add any background color from the skins-pseudo module.

Colors

Below are examples of combining each color in the skins module with the dim class.

• black link <a href="#" class="link dim black">black link</a>
• near-black link <a href="#" class="link dim near-black">near-black link</a>
• dark-gray link <a href="#" class="link dim dark-gray">dark-gray link</a>
• mid-gray link <a href="#" class="link dim mid-gray">mid-gray link</a>
• gray link <a href="#" class="link dim gray">gray link</a>
• black-90 link <a href="#" class="link dim black-90">black-90 link</a>
• black-80 link <a href="#" class="link dim black-80">black-80 link</a>
• black-70 link <a href="#" class="link dim black-70">black-70 link</a>
• black-60 link <a href="#" class="link dim black-60">black-60 link</a>
• black-50 link <a href="#" class="link dim black-50">black-50 link</a>
• navy link <a href="#" class="link dim navy">navy link</a>
• dark-blue link <a href="#" class="link dim dark-blue">dark-blue link</a>
• blue link <a href="#" class="link dim blue">blue link</a>
• dark-red link <a href="#" class="link dim dark-red">dark-red link</a>

• silver link <a href="#" class="link dim silver">silver link</a>
• light-silver link <a href="#" class="link dim light-silver">light-silver link</a>
• moon-gray link <a href="#" class="link dim moon-gray">moon-gray link</a>
• light-gray link <a href="#" class="link dim light-gray">light-gray link</a>
• near-white link <a href="#" class="link dim near-white">near-white link</a>
• white link <a href="#" class="link dim white">white link</a>
• white-90 link <a href="#" class="link dim white-90">white-90 link</a>
• white-80 link <a href="#" class="link dim white-80">white-80 link</a>
• white-70 link <a href="#" class="link dim white-70">white-70 link</a>
• white-60 link <a href="#" class="link dim white-60">white-60 link</a>
• white-50 link <a href="#" class="link dim white-50">white-50 link</a>
• red link <a href="#" class="link dim red">red link</a>
• light-red link <a href="#" class="link dim light-red">light-red link</a>
• orange link <a href="#" class="link dim orange">orange link</a>
• gold link <a href="#" class="link dim gold">gold link</a>
• yellow link <a href="#" class="link dim yellow">yellow link</a>
• light-yellow link <a href="#" class="link dim light-yellow">light-yellow link</a>
• purple link <a href="#" class="link dim purple">purple link</a>
• light-purple link <a href="#" class="link dim light-purple">light-purple link</a>
• dark-pink link <a href="#" class="link dim dark-pink">dark-pink link</a>
• hot-pink link <a href="#" class="link dim hot-pink">hot-pink link</a>
• pink link <a href="#" class="link dim pink">pink link</a>
• light-pink link <a href="#" class="link dim light-pink">light-pink link</a>
• dark-green link <a href="#" class="link dim dark-green">dark-green link</a>
• green link <a href="#" class="link dim green">green link</a>
• light-green link <a href="#" class="link dim light-green">light-green link</a>
• light-blue link <a href="#" class="link dim light-blue">light-blue link</a>
• lightest-blue link <a href="#" class="link dim lightest-blue">lightest-blue link</a>
• washed-blue link <a href="#" class="link dim washed-blue">washed-blue link</a>
• washed-green link <a href="#" class="link dim washed-green">washed-green link</a>
• washed-yellow link <a href="#" class="link dim washed-yellow">washed-yellow link</a>
• washed-red link <a href="#" class="link dim washed-red">washed-red link</a>

/*

   LINKS
   Docs: http://tachyons.io/docs/elements/links/

*/

.link {
  text-decoration: none;
  transition: color .15s ease-in;
}

.link:link,
.link:visited {
  transition: color .15s ease-in;
}
.link:hover   {
  transition: color .15s ease-in;
}
.link:active  {
  transition: color .15s ease-in;
}
.link:focus   {
  transition: color .15s ease-in;
  outline: 1px dotted currentColor;
}