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:

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

 

link list with 4 bulleted links

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!

link list with 4 links, first link highlighted in red colour

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!

link list with 4 links, first link highlighted in red colour with larger margins