Delete buttons.md

2021-01-01 12:35:58 -06:00
parent 1e521c5ae0
commit b0f68c1ada
1 changed files with 0 additions and 97 deletions
@@ -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 }
 ```