Independent Design & Technology studio working with organizations revitalizing urban communities.

Category Development

CSS Pro Tip: Expanding Clickable Area

Next time you need to make that button or link easier to click, try this trick instead of messing around with div Inception.

I discovered this trick when working on a timeline menu for our client, Greenhouse Go. I wanted to expand the clickable area of an element without getting into nested div madness. I found this pretty clean solution that just requires an extra class on the target and position: relative; be put on the parent. That's it. Done.

div.expand::before {
  content: '';
  position: absolute;
  top: -25%;
  left: -25%;
  right: -25%;
  bottom: -25%;
}

The result is a cleanly expanded click area. And you can expand it by any metric you want, pixels, ems, rems, or percentages.

comments powered by Disqus

See How We Help Build Innovative Urban Projects