Buttons

{: .no_toc }

Table of contents

{: .no_toc .text-delta }

  1. TOC

Basic button styles

Link button

Link button Link button Link button

Link button

[Link button](https://dokumentaro.baldr.net){: .btn }

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

[Link button](https://dokumentaro.baldr.net){: .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 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 }

Tags