Buttons and Links – Design Portal

Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take.

Demo

Button

This is a content link.

<a href="https://www.howstuffworks.com" class="btn py-3 px-7 mb-4">Button</a><br/>
<p>This is a <a class="ext-link" href="http://www.system1.com">content link</a>.</p>

/* HSW components use Tailwind! 
Individual utility classes are added to the HTML. */

No JS! 😀

States & Variations

Standard

Button

<a href="https://www.howstuffworks.com" class="btn py-3 px-7 mb-4">Button</a>

Jumbotron Button

Button

<a class="btn py-2 px-7 xl:py-3 xl:px-10 text-sm xl:text-lg" href="https://www.howstuffworks.com">Read More</a>

Card Button

Button

<span class="btn z-10 self-start text-sm py-3 px-7 mt-8">Button</span>

Sidebar Button

<button class="btn py-2 px-7 xl:py-3 xl:px-10 text-sm xl:text-lg inline-flex items-center mx-auto" @click.prevent="showSidebar = true">
    Read More
    <svg class="ml-4 fill-current stroke-current" xmlns="http://www.w3.org/2000/svg" width="22" height="10" viewBox="0 0 28.396 13.211"><path d="M4398.8,5158.252l13.224,10.507,12.357-10.507" transform="translate(-4397.399 -5156.842)" fill="none" stroke-linecap="round" stroke-width="2"></path></svg>
</button>

Standard Link

This is a content link.

<p>This is a <a class="ext-link" href="https://www.howstuffworks.com">content link</a>.</p>

Open link in a new tab

This is a content link that opens in a new tab.

<p>This is a <a class="ext-link" href="https://www.howstuffworks.com" target="_blank">content link</a> that opens in a new tab.</p>