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.
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 />
).
-
1This works perfectly, and your answer came in light speed. Your rock! Thank you so much. – Ivan Wang Jun 18 '12 at 8:05
-
If you worry about semantics,t1m0thy's answer seems to be the right choice. See: davidwalsh.name/html5-buttons – aldemarcalazans Aug 28 '17 at 19:38
-
Facebook also uses this approach to expand the tap target of the links in the navigation for their mobile web app. I prefer this approach, much more readable IMO. "// make tap target of link bigger" – cacoder Jul 23 '18 at 18:32
-
Remember to make
display:block
both the container of the<a />
and also the<a />
. Then you should usepadding
for the<a />
, not for the container of the<a />
. – Jaime Montoya Apr 29 '20 at 11:18
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)
-
9this is the real answer on how to increase clickable area of a tag button – StefansArya Mar 12 '17 at 9:05
-
1This was the first recipe I've found that worked with an icon next to it, thanks. However I had to change:
padding: 0 2em; margin: 0 -2em;
to prevent the clickable area from being pushed down. – Gringo Suave Jul 27 '17 at 18:56 -
3I also needed to set
box-sizing: content-box
which was reset toborder-box
by bootstrap – Cyril Durand Jan 9 '19 at 18:21 -
-
The z-index does not seem to be necessary in Chrome? Maybe in other browsers? – Protector one Dec 14 '20 at 14:38
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.
-
This code has nothing to do with HTML5.
display
property has existed in CSS long before HTML5 spec has been even started. – poncha Jun 18 '12 at 7:36 -
1@poncha: sorry wrongly markup initially, was telling about this:
<a href="#foo"><div>.......</div></a>
egdiv
insidea
is valid in html5. – Sarfraz Jun 18 '12 at 7:38 -
1
Just make the anchor display: block
and width/height: 100%
. Eg:
.button a {
display: block;
width: 100%;
height: 100%;
}
jsFiddle: http://jsfiddle.net/4mHTa/
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>
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.
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/
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;
}
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;
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>
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;
}