←All memories
Dejan GeorgievDejan Georgiev

Accessible Clickable Cards

 — #Accessibility#CSS

Codepen Demo

Card layout where the card itself isn't an anchor link, but the whole card is clickable (with a :before pseudo element on the main <a>). Links inside of the card are still clickable.

CSS

.grid__item {
  &:hover,
  &:focus-within {
    background-color: #eee;
  }

  a {
    position: relative;
    z-index: 1;
  }

  h2 {
    a {
      position: static;

      &:hover,
      &:focus {
        color: blue;
      }

      &:before {
        content: '';
        display: block;
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: background-color 0.1s ease-out;
        background-color: transparent;
      }
    }
  }
}

About Dejan Georgiev

Hey! I'm Dejan, Founder of Uliasti, makers of Kaufpedia, Advanzo and Techify. Subscribe below to follow my thinking on business, faith, tech, product development, and whatever else is on my mind.

Thanks for visiting, thanks for reading.