Buttons

Basic button styles

Links that look like buttons

<Button className="btn" href="http://example.com/">Link Button</Button>

<Button className="btn btn-purple" href="http://example.com/">Link Button</Button>
<Button className="btn btn-blue" href="http://example.com/">Link Button</Button>
<Button className="btn btn-green" href="http://example.com/">Link Button</Button>

<Button className="btn btn-outline" href="http://example.com/">Link Button</Button>

Using utilities with buttons

Button size

Wrap the button in a container that uses the font-size utility classes to scale buttons:

<span class="fs-8">
<Button className="btn" href="http://example.com/">Big Button</Button>
</span>

<span class="fs-3">
<Button className="btn" href="http://example.com/">Tiny Button</Button>
</span>

Spacing between buttons

Use the margin utility classes to add spacing between two buttons in the same block.

<Button className="btn btn-purple mr-2" href="http://example.com/">Button with space</Button>
<Button className="btn btn-blue mr-2" href="http://example.com/">Button</Button>

<Button className="btn btn-green mr-4" href="http://example.com/">Button with more space</Button>
<Button className="btn btn-blue" href="http://example.com/">Button</Button>