1
0
mirror of https://github.com/jenil/chota.git synced 2023-08-10 21:13:07 +03:00
chota/docs/_includes/buttons.html

49 lines
2.1 KiB
HTML
Raw Normal View History

2017-04-02 10:48:47 +03:00
<section id="buttons">
<h4>Buttons</h4>
2023-03-21 07:02:23 +03:00
<p>chota includes five predefined button styles, each serving its own semantic purpose. It also applies these styles to <code>input, button</code> elements, see the complete <a href="https://rawgit.com/jenil/chota/main/test/index.html#forms__action" target="_blank">demo</a>.</p>
2017-04-02 10:48:47 +03:00
<div class="row">
<div class="col-4">
<div class="buttons">
<a href="#!" class="button">Default</a>
<a href="#!" class="button primary">Primary</a>
<a href="#!" class="button secondary">Secondary</a>
2018-07-30 00:57:15 +03:00
<a href="#!" class="button dark">Dark</a>
<a href="#!" class="button error">Error</a>
<a href="#!" class="button success">Success</a>
2017-04-02 10:48:47 +03:00
<a href="#!" class="button outline">Outline</a>
<a href="#!" class="button outline primary">Primary outline</a>
<a href="#!" class="button outline secondary">Secondary outline</a>
2018-07-30 00:57:15 +03:00
<a href="#!" class="button outline dark">Dark outline</a>
2017-04-02 10:48:47 +03:00
<a href="#!" class="button clear">Clear</a>
2018-07-30 00:57:15 +03:00
<button type="button" class="button primary icon">New file
<img src="https://icongr.am/feather/file.svg?size=16&amp;color=ffffff" alt="icon">
</button>
<button class="button icon-only">
<img src="https://icongr.am/feather/search.svg?size=24">
</button>
2017-04-02 10:48:47 +03:00
</div>
</div>
<div class="col">
{% highlight html %}
<a class="button">Default</a>
<a class="button primary">Primary</a>
<a class="button secondary">Secondary</a>
2018-07-30 00:57:15 +03:00
<a class="button dark">Dark</a>
<a class="button error">Error</a>
<a class="button success">Success</a>
2017-04-02 10:48:47 +03:00
<a class="button outline">Outline</a>
<a class="button outline primary">Primary outline</a>
<a class="button outline secondary">Secondary outline</a>
2018-07-30 00:57:15 +03:00
<a class="button outline dark">Dark outline</a>
2017-04-02 10:48:47 +03:00
<a class="button clear">Clear</a>
2018-07-30 00:57:15 +03:00
<button type="button" class="button primary icon">New file
<img src="https://icongr.am/feather/file.svg?size=16&amp;color=ffffff" alt="icon">
</button>
<button class="button icon-only">
<img src="https://icongr.am/feather/search.svg?size=24">
</button>
2017-04-02 10:48:47 +03:00
{% endhighlight %}
</div>
</div>
</section>