CTA Button CSS Component

Default CTA Button

Use the cta-btn class on an <a> tag to create a CTA button.

<a class="cta-btn" href="https://www.ebay.com">
  <span class="cta-btn__cell">
    <span> Link </span>
    <svg class="icon icon--24" height="8" width="8" aria-hidden="true">
      <use href="#icon-arrow-right-24" />
    </svg>
  </span>
</a>

Large CTA Button

Use the large modifier to increase the size of the CTA button.

<a class="cta-btn cta-btn--large" href="https://www.ebay.com">
  <span class="cta-btn__cell">
    <span> Link </span>
    <svg class="icon icon--24" height="8" width="8" aria-hidden="true">
      <use href="#icon-arrow-right-24" />
    </svg>
  </span>
</a>

Fluid CTA Button

Use the fluid modifier to make the CTA button grow to fill the width of its container.

<a class="cta-btn cta-btn--fluid" href="https://www.ebay.com">
  <span class="cta-btn__cell">
    <span> Link </span>
    <svg class="icon icon--24" height="8" width="8" aria-hidden="true">
      <use href="#icon-arrow-right-24" />
    </svg>
  </span>
</a>

Fixed Width Truncated CTA Button

CTA buttons naturally grow wider with their text. Apply a fixed width and the truncated modifier to truncate overflowing text instead of wrapping.

<a
  class="cta-btn cta-btn--large cta-btn--truncated"
  href="https://www.ebay.com"
  style="width: 200px"
>
  <span class="cta-btn__cell">
    <span> Link with a lot of text that should wrap </span>
    <svg class="icon icon--24" height="8" width="8" aria-hidden="true">
      <use href="#icon-arrow-right-24" />
    </svg>
  </span>
</a>

Disabled CTA Button

Remove the href attribute to fully disable a CTA button.

<a class="cta-btn">
  <span class="cta-btn__cell">
    <span> Link </span>
    <svg class="icon icon--24" height="8" width="8" aria-hidden="true">
      <use href="#icon-arrow-right-24" />
    </svg>
  </span>
</a>

Partially Disabled CTA Button

A partially disabled CTA button retains keyboard focus while communicating a disabled state, via aria-disabled="true" . This helps prevent keyboard focus being moved back to the start of the page when focus is lost. Unlike removing href , this variant must also be prevented from navigating via JavaScript.

<a class="cta-btn" href="https://www.ebay.com" aria-disabled="true">
  <span class="cta-btn__cell">
    <span> Link </span>
    <svg class="icon icon--24" height="8" width="8" aria-hidden="true">
      <use href="#icon-arrow-right-24" />
    </svg>
  </span>
</a>