Tornado Logo

Buttons - Tornado UI v2

Tornado Provide a Predesigned Standard Buttons With Multiple Themes Style.

Sass Customize

in order to edit the Buttons you can use the css classes 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 classes and you can switch between many sizes lets see the example of each 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

in order to apply a outline button you can use the class name outline and it will reverse the colors of the button to the border outline style.


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

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.