Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by NAUSHAD DARUWALLA
NAUSHAD DARUWALLA
1,587 Points

Increase clickable area of button using CSS

Hello, I am trying to increase the clickable area of the button as done in: Library > Websites > Build a Simple Website > Styling Content > Writing the CSS. My problem is that when I add padding or margin, it only creates the actual button however it does not increase the clickable area, only the link. How do I solve this problem?

5 Answers

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

Or you could just put a bigger padding on them.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

+1 for this advice

@NAUSHAD DARUWALLA - Here's a great article on using padding to increase the clickable area of links if you need more help with this technique.

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Yep I agree, Just increase the padding of the button area.

Ben Russell
Ben Russell
3,667 Points
Ben Russell
Ben Russell
3,667 Points

Not sure that's right Stone Preston.....also, you can solve this issue using CSS, not the HTML (see previous entries by Chase and James).

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

it does work. Although Im not sure its exactly what he wanted. I assumed he wanted the whole button clickable, which nesting the button within the a tag would do. However if he only wanted some of it clickable then the padding is the way to go.

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

I see what you're saying Stone after re reading the question.

Ryan Graham
Ryan Graham
936 Points
Ryan Graham
Ryan Graham
936 Points

yourelement:after{content:''; position:absolute; top:-10px; bottom:-10px; left:-10px; right:-10px; }

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

You need to make the button div itself a link. Nest the div tag within an a tag.

Example:

<a href=#><div></div></a>
Jeremy Antoine
Jeremy Antoine
15,785 Points
Jeremy Antoine
Jeremy Antoine
15,785 Points

Perfect! Exactly what I was looking for! Way better than adding padding which could cause potential layout issues.

NAUSHAD DARUWALLA
NAUSHAD DARUWALLA
1,587 Points
NAUSHAD DARUWALLA
NAUSHAD DARUWALLA
1,587 Points

Thank you guys for responding! However, I tried both methods but they don't seem to work. When I add padding to the buttons, the buttons only get bigger without increasing the clickable area. When I increase the margin, it only pushes the surrounding elements away. Also when I put the div containing the buttons inside an a tag, it really didn't do anything. What should I do now?