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

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.

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

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>