Form | Buttons
Tornado Provide a Predesigned Standard Form Controls With Support for Multiple Themes Style and Many Other Useful Features.
Sass Customize
in order to edit the Buttons you can use the css class's to overide the theme or you can edit it with sass Tornado Folder/SCSS/forms/_buttons.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.
Standard Buttons
in order to use the button theme simply you can add the class btn to your element tag and for coloring the button you can use the tornado color's class and you can switch between many sizes lets see the example of every button style we have below.
<a href="#" class="btn">Default Button</a>
<a href="#" class="btn primary">Primary</a>
<a href="#" class="btn secondary">Secondary</a>
<a href="#" class="btn info">Info</a>
<a href="#" class="btn success">Success</a>
<a href="#" class="btn danger">Danger</a>
<a href="#" class="btn warning">Warning</a>
<a href="#" class="btn gray">Gray</a>
<a href="#" class="btn dark">Dark</a>
Buttons Sizes
the buttons have x4 Sizes to Switch Between it the default size , and tiny size , small size , large size
<a href="#" class="btn tiny">Tiny Size</a>
<a href="#" class="btn small">Small Size</a>
<a href="#" class="btn">Default Size</a>
<a href="#" class="btn large">Large Size</a>
Outline Buttons Theme
<a href="#" class="btn outline primary">Primary</a>
<a href="#" class="btn outline secondary">Secondary</a>
<a href="#" class="btn outline info">Info</a>
<a href="#" class="btn outline success">Success</a>
<a href="#" class="btn outline danger">Danger</a>
<a href="#" class="btn outline warning">Warning</a>
<a href="#" class="btn outline gray">Gray</a>
<a href="#" class="btn outline dark">Dark</a>
Rounded Buttons Theme
in order to apply a round corner button you can use the class name round-corner and for a full round shape you can use the class name rounded
<a href="#" class="btn round-corner primary">Primary</a>
<a href="#" class="btn rounded secondary">Secondary</a>
Utilities
Class Name | Element | Description |
---|---|---|
primary | Button | Coloring Button with The Primary Theme Color. |
secondary | Button | Coloring Button with The Secondary Theme Color. |
info | Button | Coloring Button with The Info Theme Color. |
success | Button | Coloring Button with The Success Theme Color. |
danger | Button | Coloring Button with The Danger Theme Color. |
warning | Button | Coloring Button with The Warning Theme Color. |
gray | Button | Coloring Button with The Gray Theme Color. |
dark | Button | Coloring Button with The Dark Theme Color. |
tiny | Button | Resize The Button To Tiny Little One. |
small | Button | Resize The Button To Small One. |
large | Button | Resize The Button To Large One. |
outline | Button | The Outline/Lined Button Style. |
round-corner | Button | 5px Rounded Radius Button Style. |
rounded | Button | Full Rounded Button Style. |
circle | Circle Button | Circle Button Style. |