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
<a href="#" class="link b blue hover-black">hover-black</a>
<a href="#" class="link b black hover-near-black">hover-near-black</a>
<a href="#" class="link b black hover-dark-gray">hover-dark-gray</a>
<a href="#" class="link b black hover-mid-gray">hover-mid-gray</a>
<a href="#" class="link b black hover-gray">hover-gray</a>
<a href="#" class="link b black hover-silver">hover-silver</a>
<a href="#" class="link b black hover-light-silver">hover-light-silver</a>
<a href="#" class="link b black hover-moon-gray">hover-moon-gray</a>
<a href="#" class="link b black hover-light-gray">hover-light-gray</a>
<a href="#" class="link b black hover-near-white">hover-near-white</a>
<a href="#" class="link b black hover-white">hover-white</a>
<a href="#" class="link b black hover-transparent">hover-transparent</a>
<a href="#" class="link b black hover-dark-red">hover-dark-red</a>
<a href="#" class="link b black hover-red">hover-red</a>
<a href="#" class="link b black hover-light-red">hover-light-red</a>
<a href="#" class="link b black hover-orange">hover-orange</a>
<a href="#" class="link b black hover-gold">hover-gold</a>
<a href="#" class="link b black hover-yellow">hover-yellow</a>
<a href="#" class="link b black hover-light-yellow">hover-light-yellow</a>
<a href="#" class="link b black hover-purple">hover-purple</a>
<a href="#" class="link b black hover-light-purple">hover-light-purple</a>
<a href="#" class="link b black hover-dark-pink">hover-dark-pink</a>
<a href="#" class="link b black hover-hot-pink">hover-hot-pink</a>
<a href="#" class="link b black hover-pink">hover-pink</a>
<a href="#" class="link b black hover-light-pink">hover-light-pink</a>
<a href="#" class="link b black hover-dark-green">hover-dark-green</a>
<a href="#" class="link b black hover-green">hover-green</a>
<a href="#" class="link b black hover-light-green">hover-light-green</a>
<a href="#" class="link b black hover-navy">hover-navy</a>
<a href="#" class="link b black hover-dark-blue">hover-dark-blue</a>
<a href="#" class="link b black hover-blue">hover-blue</a>
<a href="#" class="link b black hover-light-blue">hover-light-blue</a>
<a href="#" class="link b black hover-lightest-blue">hover-lightest-blue</a>
<a href="#" class="link b black hover-washed-blue">hover-washed-blue</a>
<a href="#" class="link b black hover-washed-green">hover-washed-green</a>
<a href="#" class="link b black hover-washed-yellow">hover-washed-yellow</a>
<a href="#" class="link b black hover-washed-red">hover-washed-red</a>
Background color transition on hover
<a href="#" class="link b blue pv2 db bg-animate hover-bg-black">bg-animate hover-bg-black</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-near-black">bg-animate hover-bg-near-black</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-dark-gray">bg-animate hover-bg-dark-gray</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-mid-gray">bg-animate hover-bg-mid-gray</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-gray">bg-animate hover-bg-gray</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-silver">bg-animate hover-bg-silver</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-silver">bg-animate hover-bg-light-silver</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-moon-gray">bg-animate hover-bg-moon-gray</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-gray">bg-animate hover-bg-light-gray</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-near-white">bg-animate hover-bg-near-white</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-white">bg-animate hover-bg-white</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-transparent">bg-animate hover-bg-transparent</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-dark-red">bg-animate hover-bg-dark-red</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-red">bg-animate hover-bg-red</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-red">bg-animate hover-bg-light-red</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-orange">bg-animate hover-bg-orange</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-gold">bg-animate hover-bg-gold</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-yellow">bg-animate hover-bg-yellow</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-yellow">bg-animate hover-bg-light-yellow</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-purple">bg-animate hover-bg-purple</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-purple">bg-animate hover-bg-light-purple</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-dark-pink">bg-animate hover-bg-dark-pink</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-hot-pink">bg-animate hover-bg-hot-pink</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-pink">bg-animate hover-bg-pink</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-pink">bg-animate hover-bg-light-pink</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-dark-green">bg-animate hover-bg-dark-green</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-green">bg-animate hover-bg-green</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-green">bg-animate hover-bg-light-green</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-navy">bg-animate hover-bg-navy</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-dark-blue">bg-animate hover-bg-dark-blue</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-blue">bg-animate hover-bg-blue</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-blue">bg-animate hover-bg-light-blue</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-lightest-blue">bg-animate hover-bg-lightest-blue</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-washed-blue">bg-animate hover-bg-washed-blue</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-washed-green">bg-animate hover-bg-washed-green</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-washed-yellow">bg-animate hover-bg-washed-yellow</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-washed-red">bg-animate hover-bg-washed-red</a>
tachyons-skins-pseudo
v1.0.1 857 B- Declarations
- 73
- Selectors
- 146
- Max. Specificity Score
- 20
- Size of Avg. Rule
- 1
Source code
src/_skins-pseudo.css
/*
SKINS:PSEUDO
Customize the color of an element when
it is focused or hovered over.
*/
.hover-black:hover,
.hover-black:focus { color: var(--black); }
.hover-near-black:hover,
.hover-near-black:focus { color: var(--near-black); }
.hover-dark-gray:hover,
.hover-dark-gray:focus { color: var(--dark-gray); }
.hover-mid-gray:hover,
.hover-mid-gray:focus { color: var(--mid-gray); }
.hover-gray:hover,
.hover-gray:focus { color: var(--gray); }
.hover-silver:hover,
.hover-silver:focus { color: var(--silver); }
.hover-light-silver:hover,
.hover-light-silver:focus { color: var(--light-silver); }
.hover-moon-gray:hover,
.hover-moon-gray:focus { color: var(--moon-gray); }
.hover-light-gray:hover,
.hover-light-gray:focus { color: var(--light-gray); }
.hover-near-white:hover,
.hover-near-white:focus { color: var(--near-white); }
.hover-white:hover,
.hover-white:focus { color: var(--white); }
.hover-bg-black:hover,
.hover-bg-black:focus { background-color: var(--black); }
.hover-bg-near-black:hover,
.hover-bg-near-black:focus { background-color: var(--near-black); }
.hover-bg-dark-gray:hover,
.hover-bg-dark-gray:focus { background-color: var(--dark-gray); }
.hover-bg-dark-gray:focus,
.hover-bg-mid-gray:hover { background-color: var(--mid-gray); }
.hover-bg-gray:hover,
.hover-bg-gray:focus { background-color: var(--gray); }
.hover-bg-silver:hover,
.hover-bg-silver:focus { background-color: var(--silver); }
.hover-bg-light-silver:hover,
.hover-bg-light-silver:focus { background-color: var(--light-silver); }
.hover-bg-moon-gray:hover,
.hover-bg-moon-gray:focus { background-color: var(--moon-gray); }
.hover-bg-light-gray:hover,
.hover-bg-light-gray:focus { background-color: var(--light-gray); }
.hover-bg-near-white:hover,
.hover-bg-near-white:focus { background-color: var(--near-white); }
.hover-bg-white:hover,
.hover-bg-white:focus { background-color: var(--white); }
.hover-bg-transparent:hover,
.hover-bg-transparent:focus { background-color: var(--transparent); }
.hover-dark-red:hover,
.hover-dark-red:focus { color: var(--dark-red); }
.hover-red:hover,
.hover-red:focus { color: var(--red); }
.hover-light-red:hover,
.hover-light-red:focus { color: var(--light-red); }
.hover-orange:hover,
.hover-orange:focus { color: var(--orange); }
.hover-gold:hover,
.hover-gold:focus { color: var(--gold); }
.hover-yellow:hover,
.hover-yellow:focus { color: var(--yellow); }
.hover-light-yellow:hover,
.hover-light-yellow:focus { color: var(--light-yellow); }
.hover-purple:hover,
.hover-purple:focus { color: var(--purple); }
.hover-light-purple:hover,
.hover-light-purple:focus { color: var(--light-purple); }
.hover-dark-pink:hover,
.hover-dark-pink:focus { color: var(--dark-pink); }
.hover-hot-pink:hover,
.hover-hot-pink:focus { color: var(--hot-pink); }
.hover-pink:hover,
.hover-pink:focus { color: var(--pink); }
.hover-light-pink:hover,
.hover-light-pink:focus { color: var(--light-pink); }
.hover-dark-green:hover,
.hover-dark-green:focus { color: var(--dark-green); }
.hover-green:hover,
.hover-green:focus { color: var(--green); }
.hover-light-green:hover,
.hover-light-green:focus { color: var(--light-green); }
.hover-navy:hover,
.hover-navy:focus { color: var(--navy); }
.hover-dark-blue:hover,
.hover-dark-blue:focus { color: var(--dark-blue); }
.hover-blue:hover,
.hover-blue:focus { color: var(--blue); }
.hover-light-blue:hover,
.hover-light-blue:focus { color: var(--light-blue); }
.hover-lightest-blue:hover,
.hover-lightest-blue:focus { color: var(--lightest-blue); }
.hover-washed-blue:hover,
.hover-washed-blue:focus { color: var(--washed-blue); }
.hover-washed-green:hover,
.hover-washed-green:focus { color: var(--washed-green); }
.hover-washed-yellow:hover,
.hover-washed-yellow:focus { color: var(--washed-yellow); }
.hover-washed-red:hover,
.hover-washed-red:focus { color: var(--washed-red); }
.hover-bg-dark-red:hover,
.hover-bg-dark-red:focus { background-color: var(--dark-red); }
.hover-bg-red:hover,
.hover-bg-red:focus { background-color: var(--red); }
.hover-bg-light-red:hover,
.hover-bg-light-red:focus { background-color: var(--light-red); }
.hover-bg-orange:hover,
.hover-bg-orange:focus { background-color: var(--orange); }
.hover-bg-gold:hover,
.hover-bg-gold:focus { background-color: var(--gold); }
.hover-bg-yellow:hover,
.hover-bg-yellow:focus { background-color: var(--yellow); }
.hover-bg-light-yellow:hover,
.hover-bg-light-yellow:focus { background-color: var(--light-yellow); }
.hover-bg-purple:hover,
.hover-bg-purple:focus { background-color: var(--purple); }
.hover-bg-light-purple:hover,
.hover-bg-light-purple:focus { background-color: var(--light-purple); }
.hover-bg-dark-pink:hover,
.hover-bg-dark-pink:focus { background-color: var(--dark-pink); }
.hover-bg-hot-pink:hover,
.hover-bg-hot-pink:focus { background-color: var(--hot-pink); }
.hover-bg-pink:hover,
.hover-bg-pink:focus { background-color: var(--pink); }
.hover-bg-light-pink:hover,
.hover-bg-light-pink:focus { background-color: var(--light-pink); }
.hover-bg-dark-green:hover,
.hover-bg-dark-green:focus { background-color: var(--dark-green); }
.hover-bg-green:hover,
.hover-bg-green:focus { background-color: var(--green); }
.hover-bg-light-green:hover,
.hover-bg-light-green:focus { background-color: var(--light-green); }
.hover-bg-navy:hover,
.hover-bg-navy:focus { background-color: var(--navy); }
.hover-bg-dark-blue:hover,
.hover-bg-dark-blue:focus { background-color: var(--dark-blue); }
.hover-bg-blue:hover,
.hover-bg-blue:focus { background-color: var(--blue); }
.hover-bg-light-blue:hover,
.hover-bg-light-blue:focus { background-color: var(--light-blue); }
.hover-bg-lightest-blue:hover,
.hover-bg-lightest-blue:focus { background-color: var(--lightest-blue); }
.hover-bg-washed-blue:hover,
.hover-bg-washed-blue:focus { background-color: var(--washed-blue); }
.hover-bg-washed-green:hover,
.hover-bg-washed-green:focus { background-color: var(--washed-green); }
.hover-bg-washed-yellow:hover,
.hover-bg-washed-yellow:focus { background-color: var(--washed-yellow); }
.hover-bg-washed-red:hover,
.hover-bg-washed-red:focus { background-color: var(--washed-red); }