How to increase touch area on link & buttons

If you are using a html version of a site you will notice that sometimes you wont get the touch areas like it should. You have to touch very carefully with your tip of you finger and maybe you will succeed.

If you are designing a mobile app, you will want to add a small button (let’s say a back button) with a small arrow on it. If you are doing it right, you will probably use some sprite image with few other parts in it. One way is to add more white space in that sprite and take in consideration few more pixels, then in CSS you specify a bigger width/height and everyone is happy. Except de developer. You will face the problem of getting the coordinates of your sprites, small tweaks using firebug and so on. Also, you may have issues when you are trying to position that element in page.

My solution

Very easy, very neat, very CSS:

.back { position:relative; width:10px;height:10px }
  .back:before {
    content:".";
    text-indent:-9999px;
    left:-10px;
    right:-10px;
    bottom:-10px;
    top:-10px;
    background:#c00; /* you can remove this */
    position:absolute;
    opacity:0;
  }

That’s all. Basically you extend the active area without changing the space that initial area will cover.

Pretty neat, no?

Leave a comment!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter