How to increase the clickable area of a <a> tag button?
CssButtonHtmlClickableCss Problem Overview
I have learnt from this post that always use <a> tags or <button> tags to make button. Now I'm trying to use <a> tag. My question is: is there any way to increase the tag clickable area? Say I'm using <a> in a div box. I want the whole div box to become a button. Can I change the clicking area to the whole div box?
Thanks for you help.
Css Solutions
Solution 1 - Css
To increase the area of a text link you can use the following css;
a {
display: inline-block;
position: relative;
z-index: 1;
padding: 2em;
margin: -2em;
}
- Display: inline-block is required so that margins and padding can be set
- Position needs to be relative so that...
- z-index can be used to make the clickable area stay on top of any text that follows.
- The padding increases the area that can be clicked
- The negative margin keeps the flow of surrounding text as it should be (beware of over lapping links)
Solution 2 - Css
Edit:
@t1m0thy's answer is more elegant than mine, better follow his advices.
Also, nice link proposed by @aldemarcalazans in the comments: https://davidwalsh.name/html5-buttons.
Original answer:
Use <a /> when you need a link (the a of anchor). Use <button /> when you need a button.
That said, if you really need to expand an <a />, add the CSS attribute display: block; on it. You'll then be able to specify a width and/or a height (i.e. as if it were a <div />).
Solution 3 - Css
Yes you can if you are using HTML5, this code is valid not otherwise:
<a href="#foo"><div>.......</div></a>
If you are not using HTML5, you can make your link block:
<a href="#foo" id="link">Click Here</a>
CSS:
#link {
display : block;
width:100px;
height:40px;
}
Notice that you can apply width, height only after making your link block level element.
Solution 4 - Css
Just make the anchor display: block and width/height: 100%. Eg:
.button a {
display: block;
width: 100%;
height: 100%;
}
jsFiddle: http://jsfiddle.net/4mHTa/
Solution 5 - Css
add padding to the CSS class of anchor tag. If required, add padding-top, padding-bottom,... individually according to the clickable area you want. It worked for me.
Solution 6 - Css
If you're using HTML 5, i.e. the doctype
<!doctype html>
then you can just use block-level links.
<a href="google.com">
<div class="hello">
..
</div>
</a>
Solution 7 - Css
For me the padding solution wasn't good, as I was using border on the button, and would've been hard to put modify the markup to create an overlay for the touch area.
So what I did, is I just used the :before pseudo tag, and created an overlay, which was perfect in my case, as the click event propagated the same way.
button.my-button:before {
content: '';
position: absolute;
width: 26px;
height: 26px;
top: -6px;
left: -5px;
}
Solution 8 - Css
You might try using display: block or display: inline-block. A nice tutorial can be found here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
Solution 9 - Css
use position css property and set top,right,bottom and left to Zero.. set z-index if needed in my case in i used text-indent because i dont want to show link "text" but if you want to show link "text" , just don't use text-indent
display:block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px;
Solution 10 - Css
Big thanks to the contributors to the answers here, it pointed me in the right direction.
For the Bootstrap4 users out there, this worked for me. Sets the a link (tap target) to correct size to pass the Lighthouse Site Audit on mobiles.
<span class="small">
<a class="d-inline position-relative p-3 m-n3" style="z-index: 1;" href="/AdvancedSearch" title="Advanced Site Search using extra optional filters">Advanced Site Search</a>
</span>
Solution 11 - Css
the simple way I found out: add a "li" tag on the right side of an "a" tag List item
<li></span><a><span id="expand1"></span></a></li>
On CSS file create this below:
#expand1 {
padding-left: 40px;
}
Solution 12 - Css
Provide more left,Bottom,right and top space. This will have more clickable/touchable area of anchor tag for easy click...
Remember: this may have negative effects as well
a {
text-decoration: none;
font-size: 12px;
min-width: 10px !important;
padding: 0px 1px !important;
margin-right: 3px;
position: relative;
z-index: 50;
}
a:before {
position: absolute;
content: '';
top: -10px;
right: -10px;
left: -10px;
bottom: -10px;
z-index: 40;
}