How to extend anchor element clickable radius to fill the containing div?

Question

<div class="social facebook">
        <a class="nostyle" href ="www.facebook.com">
            <i class="fa fa-facebook fa-2x"></i>    
        </a>
    </div>

Give the code above, I would like to know how can I extend the "clickable area" of my anchor tag.

The problem is the following: I'm successfully redirected to the Facebook page, but I can only click the icon itself ( My effective clickable area is the icon itself) and I would like to change that so when I click anywhere in the circle I would get redirected too.

My css look like this:

.social{
text-align:center;
width:60px;
height:60px;
float:left;
background:rgb(255,255,255);
border:1px solid rgb(204,204,204);
box-shadow:0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
border-radius:100px;
margin:0 10px 10px 0;
padding:12px;

}

score 2 · Accepted Answer · answered Feb 06 '19 at 21:10

2

I would wrap the link around the round DIV:

    <a class="nostyle" href ="www.facebook.com">
      <div class="social facebook">
        <i class="fa fa-facebook fa-2x"></i>    
       </div>
    </a>

answered Feb 06 '19 at 21:10

Johannes

64,305
18
73
130

1

see also: Is putting a div inside an anchor ever correct? https://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct – Vickel Feb 06 '19 at 21:21
I did not even think about that. It works flawlessly. Thanks! – Ban Istvan Feb 06 '19 at 21:22
1

@Vickel Thank you! – Ban Istvan Feb 06 '19 at 21:23

How to extend anchor element clickable radius to fill the containing div?

1 Answers1