Buttons

Primary and secondary

Primary has the hard indigo underline. One primary button per area.

<a class="btn btn-primary" href="#">Primary</a>
<a class="btn btn-secondary" href="#">Secondary</a>

On dark backgrounds

Light outline White pill Donate

<a class="btn-light" href="#">Light outline</a>
<a class="btn-pill" href="#">White pill</a>
<a class="btn-donate" href="#"><svg width="18" height="18" viewBox="0 0 30 30" aria-hidden="true"><path d="M15 25C6 18 3 14 3 10.5 3 7.5 5.5 5 8.5 5c2.6 0 4.8 1.5 6.5 4 1.7-2.5 3.9-4 6.5-4 3 0 5.5 2.5 5.5 5.5C27 14 24 18 15 25z" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linejoin="round"/></svg>
Donate</a>

Subscribe buttons with icons

Apple Podcasts Spotify RSS feed

<a class="pod-sub-btn" href="#"><svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="11" fill="currentColor"/><circle cx="12" cy="10" r="2" fill="#fff"/><path d="M12 13.2c-1 0-1.6.7-1.5 1.7l.5 4c.1.7.5 1 1 1s.9-.3 1-1l.5-4c.1-1-.5-1.7-1.5-1.7z" fill="#fff"/><path d="M8.6 14.4A4.8 4.8 0 1 1 15.4 14.4M6.6 16.4a7.6 7.6 0 1 1 10.8 0" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>
<span>Apple Podcasts</span></a>
<a class="pod-sub-btn" href="#"><svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="11" fill="currentColor"/><path d="M5.8 9c4.2-1.2 9.3-.9 13 1.3M6.4 12.6c3.6-1 7.4-.7 10.7 1.1M7.1 16c2.8-.7 5.6-.4 8.1.9" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round"/></svg>
<span>Spotify</span></a>
<a class="pod-sub-btn" href="#"><svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><rect x="1" y="1" width="22" height="22" rx="5" fill="currentColor"/><circle cx="7" cy="17" r="2" fill="#fff"/><path d="M5.5 11a7.5 7.5 0 0 1 7.5 7.5M5.5 6A12.5 12.5 0 0 1 18 18.5" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>
<span>RSS feed</span></a>