#035 – Desktop Hover States

(Updated on )

Just because this is a mobile-first series doesn’t mean we can ignore the interactions of desktop/laptop computers. We spend a bit of time making sure there are :hover/:focus/:active states for “clickable” things like links. We use the Sass ability to darken/lighten colors to make altering the colors on these states very easy.

It’s this easy:

a {
  color: $linkColor;
  &:hover, &:focus {
    color: darken($linkColor, 15%);
  }
}

Sorry about the not-great sound on this one =(.