just-the-docs/docs/ui-components/buttons.md

title	parent	nav_order
Buttons	UI Components	2

Buttons

{: .no_toc }

Table of contents

{: .no_toc .text-delta }

1. TOC {:toc}

---

Basic button styles

Links that look like buttons

[Link button](https://just-the-docs.com){: .btn }

Link button{: .btn .btn-purple } Link button{: .btn .btn-blue } Link button{: .btn .btn-green }

Link button{: .btn .btn-outline }

```markdown [Link button](https://just-the-docs.com){: .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:

<div class="code-example">
<button type="button" name="button" class="btn">Button element</button>
</div>
```html
<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]({% link docs/utilities/typography.md %}) to scale buttons:

[Big ass button](https://just-the-docs.com){: .btn } [Tiny ass button](https://just-the-docs.com){: .btn }

```markdown [Link button](https://just-the-docs.com){: .btn } [Tiny ass button](https://just-the-docs.com){: .btn } ```

Spacing between buttons

Use the [margin utility classes]({% link docs/utilities/layout.md %}#spacing) to add spacing between two buttons in the same block.

[Button with space](https://just-the-docs.com){: .btn .btn-purple .mr-2 } [Button](https://just-the-docs.com){: .btn .btn-blue }

Button with more space{: .btn .btn-green .mr-4 } Button{: .btn .btn-blue }

```markdown [Button with space](https://just-the-docs.com){: .btn .btn-purple .mr-2 } [Button](https://just-the-docs.com){: .btn .btn-blue }

Button with more space{: .btn .btn-green .mr-4 } Button{: .btn .btn-blue }