CODEWITHSUNDEEP
htmlcssbox-shadow
Tahmid
Tahmid

Reputation: 185

How to make box shadow clickable

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.

Upvotes: 2

Views: 2928

Answers (3)

עדן לייבה
עדן לייבה

Reputation: 1023

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.

Upvotes: 0

divy3993
divy3993

Reputation: 5810

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>

Upvotes: 3

Prashant Tapase
Prashant Tapase

Reputation: 2147

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;
    }

Upvotes: 1

Related Questions