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 >
2017-11-17 04:09:24 +03:00
< 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 >
2017-11-17 04:09:24 +03:00
< 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&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 >
2017-11-17 04:09:24 +03:00
< 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 >
2017-11-17 04:09:24 +03:00
< 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&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 >