Reduce active area of a div/image to allow for shadow

Question

Some 'buttons' (divs with background images) on my webpage have shadow effects in the image. I don't want the shadow area to cause a click event. Is there any relatively simple way to reduce the active area of a div using css? Or are there any standard techniques for doing this?

I have a click effect when the button is pressed (using :active) which I'd like to keep..

Answer 1

Add another div inside with proper size and margins that handles the click instead.

You also make have some luck with using negative margins, but cross browser support for that is poor.