Links

Links aren't styled by default, you can use the necessary classes to generate a wide variety of link styles.

Underline links and animate to color

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

link text <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'.

link text <a href="#" class="link underline-hover red">link text</a>

Dim on hover

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

link text <a href="#" class="dim">link text</a>

Add background color on hover

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

link text <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.

link text <a href="#" class="link black bg-animate hover-bg-light-blue">link text</a>

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>
  • brown link <a href="#" class="link dim brown">brown 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>
  • dark-purple link <a href="#" class="link dim dark-purple">dark-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>
  • olive-green link <a href="#" class="link dim olive-green">olive-green link</a>
  • teal link <a href="#" class="link dim teal">teal link</a>
  • dark-teal link <a href="#" class="link dim dark-teal">dark-teal 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

*/

.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;
}