Animate Background Color
HTML
<div class="pa4 lh-copy"> <a class="f4 fw7 dib pa2 no-underline bg-animate bg-white hover-bg-light-blue black" href="#0">bg-light-blue on hover </a> </div>
css
.dib {
display: inline-block;
}
.fw7 {
font-weight: 700;
}
.lh-copy {
line-height: 1.5;
}
.black {
color: #000;
}
.bg-white {
background-color: #fff;
}
.hover-bg-light-blue:hover {
background-color: #96ccff;
}
.hover-bg-light-blue:focus {
background-color: #96ccff;
}
.pa2 {
padding: .5rem;
}
.pa4 {
padding: 2rem;
}
.no-underline {
text-decoration: none;
}
.f4 {
font-size: 1.25rem;
}
.bg-animate, .bg-animate:hover, .bg-animate:focus {
transition: background-color .15s ease-in-out;
}
Css stats for this component
- Gzipped Size
- 263B
- Selectors
- 14
- Declarations
- 12
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-display tachyons-font-weight tachyons-line-height tachyons-skins tachyons-skins-pseudo tachyons-spacing tachyons-text-decoration tachyons-type-scale tachyons-hovers