How to increase the clickable area of a a tag button

Question

I have learnt from this post that always use  lt a gt  tags or  lt button gt  tags to make button  Now I m trying to use  lt a gt  tag  My question is  is there any way to increase the  tag clickable area  Say I m using  lt a gt  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

User · Answer

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>

User · Answer

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  lt a   gt  when you need a link  the a of anchor   Use  lt button   gt  when you need a button   That said  if you really need to expand an  lt a   gt   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  lt div   gt

User · Answer

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

User · Answer

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

User · Answer

the simple way I found out  add a  quot li quot  tag on the right side of an  quot a quot  tag List item  lt li gt  lt  span gt  lt a gt  lt span id  quot expand1 quot  gt  lt  span gt  lt  a gt  lt  li gt   On CSS file create this below   expand1    padding-left  40px

User · Answer

If you re using HTML 5  i e  the doctype   lt  doctype html gt    then you can just use block-level links    lt a href  google com  gt     lt div class  hello  gt            lt  div gt   lt  a gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Just make the anchor display  block and width height  100   Eg    button a       display  block      width  100       height  100       jsFiddle  http   jsfiddle net 4mHTa

User · Answer

Yes you can if you are using HTML5  this code is valid not otherwise    lt a href   foo  gt  lt div gt         lt  div gt  lt  a gt    If you are not using HTML5  you can make your link block    lt a href   foo  id  link  gt Click Here lt  a gt    CSS    link     display   block    width 100px    height 40px      Notice that you can apply width  height only after making your link block level element

[css] How to increase the clickable area of a <a> tag button?

Examples related to css

Examples related to button

Examples related to html

Examples related to clickable