mirror of
https://github.com/thangisme/notes.git
synced 2024-10-31 17:27:17 -04:00
2218e6e565
For pages in utilities/, reorder `nav_order` to follow `parent`.
2.4 KiB
2.4 KiB
layout | title | parent | nav_order |
---|---|---|---|
default | Buttons | UI Components | 2 |
Buttons
{: .no_toc }
Table of contents
{: .no_toc .text-delta }
- TOC {:toc}
Basic button styles
Links that look like buttons
[Link button](http://example.com/){: .btn }
```markdown
[Link button](http://example.com/){: .btn }
Link button{: .btn .btn-purple } Link button{: .btn .btn-blue } Link button{: .btn .btn-green }
Link button{: .btn .btn-outline }
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]({{ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
[Big ass button](http://example.com/){: .btn }
[Tiny ass button](http://example.com/){: .btn }
```markdown
[Link button](http://example.com/){: .btn }
[Tiny ass button](http://example.com/){: .btn }
```
Spacing between buttons
Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/layout.md %}#spacing) to add spacing between two buttons in the same block.
[Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
[Button ](http://example.com/){: .btn .btn-blue .mr-2 }
```markdown
[Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
[Button ](http://example.com/){: .btn .btn-blue }
Button with more space{: .btn .btn-green .mr-4 } Button {: .btn .btn-blue }
Button with more space{: .btn .btn-green .mr-4 } Button {: .btn .btn-blue }