Skip to main content
Home / The Lodge / Building a Mobile-First WordPress-Powered Artists Website / #035 – Desktop Hover States

#035 – Desktop Hover States

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 =(.

icon-link icon-logo-star icon-search icon-star