How to increase the clickable area of a tag button?

Question

I have learnt from this post that always use tags or tags to make button. Now I\'m trying to use tag. M

Answer 1

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/

Answer 2

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

Answer 3

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)

Answer 4

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.

Answer 5

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

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

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