You've already forked nakamoto-archive
Delete buttons.md
This commit is contained in:
@@ -1,97 +0,0 @@
|
||||
---
|
||||
layout: default
|
||||
title: Buttons
|
||||
parent: UI Components
|
||||
nav_order: 2
|
||||
---
|
||||
|
||||
# Buttons
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Basic button styles
|
||||
|
||||
### Links that look like buttons
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
[Link button](http://example.com/){: .btn }
|
||||
|
||||
[Link button](http://example.com/){: .btn .btn-purple }
|
||||
[Link button](http://example.com/){: .btn .btn-blue }
|
||||
[Link button](http://example.com/){: .btn .btn-green }
|
||||
|
||||
[Link button](http://example.com/){: .btn .btn-outline }
|
||||
</div>
|
||||
```markdown
|
||||
[Link button](http://example.com/){: .btn }
|
||||
|
||||
[Link button](http://example.com/){: .btn .btn-purple }
|
||||
[Link button](http://example.com/){: .btn .btn-blue }
|
||||
[Link button](http://example.com/){: .btn .btn-green }
|
||||
|
||||
[Link button](http://example.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:
|
||||
|
||||
<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:
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
<span class="fs-6">
|
||||
[Big ass button](http://example.com/){: .btn }
|
||||
</span>
|
||||
|
||||
<span class="fs-3">
|
||||
[Tiny ass button](http://example.com/){: .btn }
|
||||
</span>
|
||||
</div>
|
||||
```markdown
|
||||
<span class="fs-8">
|
||||
[Link button](http://example.com/){: .btn }
|
||||
</span>
|
||||
|
||||
<span class="fs-3">
|
||||
[Tiny ass button](http://example.com/){: .btn }
|
||||
</span>
|
||||
```
|
||||
|
||||
### 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.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
[Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
|
||||
[Button ](http://example.com/){: .btn .btn-blue .mr-2 }
|
||||
|
||||
[Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
|
||||
[Button ](http://example.com/){: .btn .btn-blue }
|
||||
</div>
|
||||
```markdown
|
||||
[Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
|
||||
[Button ](http://example.com/){: .btn .btn-blue }
|
||||
|
||||
[Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
|
||||
[Button ](http://example.com/){: .btn .btn-blue }
|
||||
```
|
||||
Reference in New Issue
Block a user