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
    3. Labels
    4. And a task list

Basic button styles

Link button

Link button Link button Link button

Link button

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

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

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

<span class="fs-3">
[Tiny ass button](https://just-the-docs.com){: .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](https://just-the-docs.com){: .btn .btn-purple .mr-2 }
[Button](https://just-the-docs.com){: .btn .btn-blue }

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

Labels

I’m a label

blue

green

purple

yellow

red

And a task list

  • Hello, this is a TODO item
  • Hello, this is another TODO item
  • Goodbye, this item is done