CODEWITHSUNDEEP
cssbuttonhtmlclickable
Ivan Wang
Ivan Wang

Reputation: 8436

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

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.

Upvotes: 114

Views: 208882

Answers (18)

KABA
KABA

Reputation: 352

I've quoted and adapted @Inc33's answer to make it more understandable, like this:

.my-button {
  position: relative;

  button&,
  input& { &:enabled { cursor: pointer } }

  &::before {
    content: '';
    position: absolute;
    inset: -1rem;

    border-radius: 1.25em; /* Circular clipping */
    background: #ccc;
    z-index: -1; /* NOTE: Enable anchor text selection with the Option (Alt) key */
  }

  &:not(:hover) {
    &::before { opacity: .5 }
  }
}

ul { display:flex; gap:2.4rem; list-style:none; margin:1rem; padding:0 }
.as-console-wrapper { position:static !important; margin-top:2.4em; line-height:1.3 }
<ul>
  <!-- WARNING: The parent element must be set to `z-index: 0` with Position -->
  <li class="relative z-0">
    <button class="my-button">Button 1</button>
  </li>
  <li>
    <button class="my-button z-0">Button 2</button>
  </li>

  <!-- Bad examples -->
  <li class="-m-4 p-4 bg-[#f003]">
    <button class="my-button">Button 3</button>
  </li>
  <li>
    <button class="my-button before:!z-0 before:content-['_']">Button 4</button>
  </li>

  <!--
    HACK: The area around the border may not be clickable
    If this issue occurs, try changing the display to value like `block`, `flex`, or `table`.
  -->
  <li class="relative z-0">
    <button class="my-button table">Button 1´</button>
  </li>
</ul>

<ul class="mt-10">
  <li class="relative z-0">
    <a href="#" class="my-button">Anchor 1</a>
  </li>
  <li>
    <a href="#" class="my-button z-0">Anchor 2</a>
  </li>

  <!-- Bad examples -->
  <li class="-m-4 p-4 bg-[#f003]">
    <a href="#" class="my-button">Anchor 3</a>
  </li>
  <li>
    <a href="#" class="my-button before:!z-0 before:content-['_']">Anchor 4</a>
  </li>
</ul>

<!-- For utility class use -->
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config = { corePlugins: { preflight: false } }</script>

Upvotes: 0

Denis Alem&#225;n
Denis Alem&#225;n

Reputation: 595

Using :after with negative inset

a {
    position: relative;
}

a:after {
    content: '';
    position: absolute;
    inset: -10px;
}

Try and Compare

a {
    color: blue;
}

a:hover {
    color: red;
}

a.enhanced {
    position: relative;
}
        
a.enhanced:after {
    content: '';
    position: absolute;
    inset: -10px;
}
<h3>Within Text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a efficitur tellus, non <a href="#">Normal Link</a>. Aliquam aliquam, lectus et tristique vulputate, enim risus porttitor mauris, sit amet interdum dolor dolor mattis diam. In id tortor sit amet enim vehicula posuere. Mauris quis turpis et enim scelerisque venenatis. Praesent laoreet mattis <a href="#" class="enhanced">Enahanced Link</a>. Duis posuere egestas neque, vehicula ullamcorper massa. Quisque accumsan neque quis dapibus interdum. Ut tincidunt sollicitudin congue.</p>

<br />

<a href="#">Normal Link</a>

<br />
<br />

<a href="#" class="enhanced">Enahanced Link</a>

Upvotes: 0

Umer Farooq
Umer Farooq

Reputation: 21

Use the CSS position property and set top, right, bottom and left to 0. Set z-index if needed.

In my case, I used text-indent because I don’t 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;

Upvotes: 0

Laura White
Laura White

Reputation: 341

If you have a situation where adding extra padding is problematic, try this:

a { 
  display: inline-block;
  position: relative:
  z-index: 1;
  width: 100%;
}

Upvotes: 0

Sam
Sam

Reputation: 361

so if you have class button you can do the following:

.button {
        position: relative;
    }
    
    .button::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
    }

Upvotes: 0

Zia Khan
Zia Khan

Reputation: 425

This also work to increase anchor tag clickable area which is stated by Fitts's Law: The Importance of Size and Distance in UI Design

a {
  position: relative;
  z-index: 50;
}

a:before {
  position: absolute;
  content: '';
  top: -10px;
  right: -10px;
  left: -10px;
  bottom: -10px;
  z-index: 40;
}
a:active{
  outline: 2px solid red;
}

Upvotes: 0

Inc33
Inc33

Reputation: 1901

For me the padding solution wasn't good, as I was using border on the button, and would've been hard to modify the markup to create an overlay for the touch area.

So I just used the :before pseudo element 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;
  cursor: pointer;
}
<button class="my-button">A button</button>

Note: Make sure you have position:relative on the parent element.

Upvotes: 17

jimasun
jimasun

Reputation: 644

The cleanest solution I've found is using ::before as I didn't wanted to alter and potentially complicate the HTML. Here is an example:

    // the parent element
    .chevron {
        position: relative;
        width: 36px;
        height: 36px;
        border-radius: 18px;
        cursor: pointer;
    }
    
    // the background covers only 36px as of the parent
    .chevron:hover {
        background: #F1FBFE;
    }
    
    // the invisible "touch area"
    .chevron::before {
        position: absolute;
        width: 48px;
        height: 48px;
        top: -6px; // half of parent's height
        content: '';
    }

Other properties such as left, cursor, z-index are not necessary. Specifically cursor is inherited from the parent as the pseudo-element lays under the parent (even though stretches further).

Bellow image show how the mouse has not yet entered the parent element but it will still trigger :hover (adding background) and cursor: pointer.

Chevron (increased hit-area) (zoomed-in for visibility)

Note: I haven't tested this for selectable contents.

Upvotes: 0

Zia Khan
Zia Khan

Reputation: 425

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;
}
<a href="">An anchor</a>

Upvotes: 3

Sarfraz
Sarfraz

Reputation: 382686

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:

#link {
  display: block;
  width: 100px;
  height: 40px;
}
<a href="#foo" id="link">Click Here</a>

Notice that you can apply width, height only after making your link block level element.

Upvotes: 22

t1m0thy
t1m0thy

Reputation: 2776

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;
}
<a href="">An anchor element</a>

  • 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)

Upvotes: 217

sp00m
sp00m

Reputation: 48817

@t1m0thy's answer is more elegant than mine. It's better to follow his advice.

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 />).

Upvotes: 64

Reinaldo Holanda
Reinaldo Holanda

Reputation: 1

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;
}

Upvotes: 0

user2223645
user2223645

Reputation: 1

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>

Upvotes: 0

Ramesh
Ramesh

Reputation: 422

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.

Upvotes: 10

DZittersteyn
DZittersteyn

Reputation: 628

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/

Upvotes: 4

Christian
Christian

Reputation: 19740

Just make the anchor display: block and width/height: 100%. Eg:

.button a {
    display: block;
    width: 100%;
    height: 100%;
}

jsFiddle: http://jsfiddle.net/4mHTa/

Upvotes: 10

Alex
Alex

Reputation: 9471

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>

Upvotes: 9

Related Questions