<!-- Click Through -->
<div class="cta  cta--arrow">View case study</div>

<!-- Click Through Link -->
<div><a href="#link-to-destination" class="cta  cta--arrow">View case study</a>

<!-- Small Click Through -->
<div class="cta  cta--small  cta--arrow">View case study</div>

<!-- Small Click Through Link -->
<div><a href="#link-to-destination" class="cta  cta--small  cta--arrow">View case study</a>

<!-- Download Link -->
<div><a href="#link-to-destination" class="cta  cta--download">Download PPT</a>

<!-- Download -->
<div class="cta  cta--small  cta--download">Download PPT</div>

<!-- Asset Link Docx -->
<div><a href="#link-to.docx" class="cta  cta--extension  cta--small">Public support for research in the NHS</a>

<!-- Asset Link Pptx -->
<div><a href="#link-to.pptx" class="cta  cta--extension  cta--small">Public support for research in the NHS</a>

<!-- Asset Link Pdf -->
<div><a href="#link-to.pdf" class="cta  cta--extension  cta--small">Public support for research in the NHS</a>

Avoid unnecessary whitespace within the .cta tag, as this will cause a hanging underline on rollover.