20 CSS Link Hover Effect Designs

Brutalist Block

Link fills with hot-pink background and gains an offset shadow on hover; click presses it down into the shadow. Brutalist design system fixture.

Brutalist Block the 18th of 20 designs in the 20 CSS Link Hover Effect Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.

Live preview

The code

<a href="#" class="cle-brut">DOWNLOAD .ZIP</a>

.cle-brut {
  display: inline-block;
  padding: 6px 12px;
  background: transparent;
  color: #fff;
  font:
    700 13px/1.2 "Courier New",
    monospace;
  letter-spacing: 0.14em;
  text-decoration: none;
  border: 2px solid #fff;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.12s,
    box-shadow 0.12s;
}
.cle-brut:hover,
.cle-brut:focus-visible {
  background: #ff3d6e;
  color: #0a0a0a;
  border-color: #0a0a0a;
  box-shadow: 5px 5px 0 #fff;
  transform: translate(-2px, -2px);
}
.cle-brut:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 #fff;
}