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.

Default Button Primary Secondary Info Success Danger Warning Gray Dark


<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

Tiny Size Small Size Default 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

Primary Secondary Info Success Danger Warning Gray Dark


<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

Primary Secondary


<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.

Next Alerts Previous Progress Bar