Buttons

Table of contents

1. Basic button styles
   1. Links that look like buttons
   2. Button element
2. Using utilities with buttons
   1. Button size
   2. Spacing between buttons

---

Basic button styles

Links that look like buttons

Link button

Link button Link button Link button

Link button

[Link button](/){: .btn }

[Link button](/){: .btn .btn-purple }
[Link button](/){: .btn .btn-blue }
[Link button](/){: .btn .btn-green }

[Link button](/){: .btn .btn-outline }

Button element

GitHub Flavored Markdown does not support the button element, so you’ll have to use inline HTML for this:

<button type="button" name="button" class="btn">Button element</button>

---

Using utilities with buttons

Button size

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

Big ass button

Tiny ass button

<span class="fs-8">
[Link button](/){: .btn }
</span>

<span class="fs-3">
[Tiny ass button](/){: .btn }
</span>

Spacing between buttons

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

Button with space Button

Button with more space Button

[Button with space](/){: .btn .btn-purple .mr-2 }
[Button](/){: .btn .btn-blue }

[Button with more space](/){: .btn .btn-green .mr-4 }
[Button](/){: .btn .btn-blue }