Increase the clickable area of links using CSS

By Inviqa

Increasing the clickable area for links may seem like a small and insignificant addition, but it actually greatly increases the usability your site offers, which in turn increases potential conversions.

Here's a super simple way of accomplishing it using just a few lines of CSS.

To begin, we’ll create the list items for the navigation:

 

 

 

 

 

 

icl-step1.gif

Now to add a bit of style to it all:


ul {
list-style: none;
padding: 5px;
margin: 0;
}
ul li {
float: left;
margin: 0 5px;
}
ul li a {
color: #000;
text-decoration: none;
}
ul li a:hover {
background: red;
text-decoration: underline;
}

Which gives us this horizontal aligned navigation bar. Half way there!

icl-step2.gif

So, we’ve created the links, and styled them, the last piece of the puzzle is to put in the CSS to maximise the link area:

ul li a {
color: #000;
text-decoration: none;
}

Add this code which will increase the 'hit' area to encompass more space surrounding the link text:

display: block;
padding: 10px;

And we’re done! Told you it was simple!

icl-step3.gif