As a general rule, your site buttons should be both sensibly labelled (so that users don’t have to guess what a button does) and prominent (so that they stick out from the rest of the page text). However, you might have to occasionally violate these rules. For example, a button that just says “Go” or that has just a symbol (such as + or -) will necessarily be quite small. That’s fine, but the smaller the button, the more trouble some users will have clicking it. This is particularly true for users who have poor eyesight or reduced physical dexterity in their hands and/or fingers.
To help these users, you can increase a button’s clickable area so that it extends a little beyond the button itself. Your interface will look exactly the same as it did before, but now your buttons will have bigger target areas for users to click. Win win! Here’s some example code:
In the HTML Editor, notice that the button “text” is actually a div element. The idea here is to accomplish two things:
- Make the
divelement look like a button. - Expand the (blank)
buttonelement to the overall size of the clickable area we want.
All the magic happens in the CSS:
button {…
button element to the size and shape we want for the total clickable area.
border: 1px dotted red
div {…
div element to make it look like a button.
The JavaScript tab includes an event handler that watches for clicks on the button element and, when detected, displays a short message on the Console. Note that this message appears not only when you click the button itself, but also when you click anywhere within the extended click target area. If you’re using this in a larger project where you’ve got the full jQuery library loaded, I’ve also provided a jQuery version of the code.