Increase the clickable area of links using CSS

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:

<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>

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!

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!