<%= head %> <%= siteHeader %>

You can use any color from the _colors.css file to style text and background colors for hover and focus states.

Examples

Underline links and animate to color

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

Change text color on hover

hover-black
<a href="#" class="link b blue hover-black">hover-black</a>
hover-near-black
<a href="#" class="link b black hover-near-black">hover-near-black</a>
hover-dark-gray
<a href="#" class="link b black hover-dark-gray">hover-dark-gray</a>
hover-mid-gray
<a href="#" class="link b black hover-mid-gray">hover-mid-gray</a>
hover-gray
<a href="#" class="link b black hover-gray">hover-gray</a>
hover-silver
<a href="#" class="link b black hover-silver">hover-silver</a>
hover-light-silver
<a href="#" class="link b black hover-light-silver">hover-light-silver</a>
hover-moon-gray
<a href="#" class="link b black hover-moon-gray">hover-moon-gray</a>
hover-light-gray
<a href="#" class="link b black hover-light-gray">hover-light-gray</a>
hover-near-white
<a href="#" class="link b black hover-near-white">hover-near-white</a>
hover-white
<a href="#" class="link b black hover-white">hover-white</a>
hover-transparent
<a href="#" class="link b black hover-transparent">hover-transparent</a>
hover-dark-red
<a href="#" class="link b black hover-dark-red">hover-dark-red</a>
hover-red
<a href="#" class="link b black hover-red">hover-red</a>
hover-light-red
<a href="#" class="link b black hover-light-red">hover-light-red</a>
hover-orange
<a href="#" class="link b black hover-orange">hover-orange</a>
hover-gold
<a href="#" class="link b black hover-gold">hover-gold</a>
hover-yellow
<a href="#" class="link b black hover-yellow">hover-yellow</a>
hover-light-yellow
<a href="#" class="link b black hover-light-yellow">hover-light-yellow</a>
hover-purple
<a href="#" class="link b black hover-purple">hover-purple</a>
hover-light-purple
<a href="#" class="link b black hover-light-purple">hover-light-purple</a>
hover-dark-pink
<a href="#" class="link b black hover-dark-pink">hover-dark-pink</a>
hover-hot-pink
<a href="#" class="link b black hover-hot-pink">hover-hot-pink</a>
hover-pink
<a href="#" class="link b black hover-pink">hover-pink</a>
hover-light-pink
<a href="#" class="link b black hover-light-pink">hover-light-pink</a>
hover-dark-green
<a href="#" class="link b black hover-dark-green">hover-dark-green</a>
hover-green
<a href="#" class="link b black hover-green">hover-green</a>
hover-light-green
<a href="#" class="link b black hover-light-green">hover-light-green</a>
hover-navy
<a href="#" class="link b black hover-navy">hover-navy</a>
hover-dark-blue
<a href="#" class="link b black hover-dark-blue">hover-dark-blue</a>
hover-blue
<a href="#" class="link b black hover-blue">hover-blue</a>
hover-light-blue
<a href="#" class="link b black hover-light-blue">hover-light-blue</a>
hover-lightest-blue
<a href="#" class="link b black hover-lightest-blue">hover-lightest-blue</a>
hover-washed-blue
<a href="#" class="link b black hover-washed-blue">hover-washed-blue</a>
hover-washed-green
<a href="#" class="link b black hover-washed-green">hover-washed-green</a>
hover-washed-yellow
<a href="#" class="link b black hover-washed-yellow">hover-washed-yellow</a>
hover-washed-red
<a href="#" class="link b black hover-washed-red">hover-washed-red</a>

Background color transition on hover

bg-animate hover-bg-gray
<a href="#" class="link b black pv2 db bg-animate hover-bg-gray">bg-animate hover-bg-gray</a>
bg-animate hover-bg-red
<a href="#" class="link b black pv2 db bg-animate hover-bg-red">bg-animate hover-bg-red</a>
bg-animate hover-bg-gold
<a href="#" class="link b black pv2 db bg-animate hover-bg-gold">bg-animate hover-bg-gold</a>
bg-animate hover-bg-pink
<a href="#" class="link b black pv2 db bg-animate hover-bg-pink">bg-animate hover-bg-pink</a>
bg-animate hover-bg-navy
<a href="#" class="link b black pv2 db bg-animate hover-bg-navy">bg-animate hover-bg-navy</a>
bg-animate hover-bg-blue
<a href="#" class="link b black pv2 db bg-animate hover-bg-blue">bg-animate hover-bg-blue</a>

Previous

Skins

Next

Hovers

<%= name %>

v<%= moduleVersion %> <%= moduleSize %>
Declarations
<%= moduleObj.declarations.total %>
Selectors
<%= moduleObj.selectors.total %>
Max. Specificity Score
<%= moduleObj.selectors.specificity.max %>
Size of Avg. Rule
<%= moduleObj.rules.size.average %>

Source code

src/_skins-pseudo.css

<%= srccss  %>

<%= navDocs %>
<%= siteFooter %> <%= googleAnalytics %>