Documentation › Make a whole block a link

Make a whole block a link

We often get requests about how to make a block a link instead of just a link inside a block. You can do this in a couple ways.

Method 1: A nested div inside a hyperlink

In HTML5, this is perfectly valid and will succeed in making a text block or custom code block clickable. The key is to draw the block at the height you are going to set the font-size/line-height at.

<a href="#quote"><div>Get a Quote</div></a>

Method 2: Use CSS to make the hyperlink a block level element

a.cta {display:block;}

This would make a hyperlink with a class of cta a block level element. The key is to draw the block at the height you are going to set the font-size/line-height at.

With both Method 1 and Method 2, if you have margins/padding applied to the hyperlink or the container (the block), you may have to adjust those.

Method 3: Use javascript

An example of the code

$('.cta').click(function() {
  window.location.href = $('a', this).attr('href');
});

This targets a class of cta and gives it the functionality of a hyperlink.

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress