How to make box shadow clickable

Question

I have an some text on screen that has a box shadow. The text is linking to an external website. However, I can only click the actual text to go to the external link. How do I make the box shadow clickable too so that I can also press anywhere on the texts box shadow and have the link still work.

Answer 1

It's Hard coded, so can not get perfect solution to this, but still you can try something like this.

 .outer { display:block; width:100px; padding: 2px 6px 6px 2px; /* The 6px is for right and bottom as they have more shadow 2px is for top and left*/ height:auto; cursor:pointer; } .inner { margin:0px; display:block; height:50px; width:100px; box-shadow:2px 2px 10px #333; } 

 <div class='outer'> <div class="inner"></div> </div> 

Answer 2

You can draw outer-box with bigger width and height. and give them ancher tag.

HTML

<a href="http://google.com">
    <div class='outer-box'>
    <div class="box"></div>
    </div>
</a>

CSS

 .outer-box{
        width:120px;
        height:120px;    
        display: inline-block;
    }.box{
        width:100px;
        height:100px;
        color:green;
        box-shadow: 10px 10px 5px #888888;
    }

Answer 3

As far as i know, It's not possible. Although you can make a div with a class of shadow and style it properly, and then make it clickable.