Tornado Provide a Predesigned Standard Buttons With Multiple Themes Style.
in order to use the button theme simply you can add the class btn to your element tag like [link, button, input-submit] 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.
<!-- Link Button -->
<a href="#" class="btn default">Default Button</a>
<!-- Button -->
<button class="btn primary">Primary</button>
<!-- Submit Button -->
<input type="submit" class="btn secondary" value="Secondary">
the buttons have x3 Sizes to Switch Between it the default size , and small size , large size
<!-- Small Button -->
<a href="#" class="btn small">Small Size</a>
<!-- Normal Button -->
<a href="#" class="btn">Default Size</a>
<!-- Large Button -->
<a href="#" class="btn large">Large Size</a>
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.
<!-- Button -->
<button class="btn primary outline">Primary</button>
<!-- Button -->
<button class="btn primary circle">01</button>
if you need a button with icon and text tornado provide two classes to do so one is btn-icon to put icon before text and btn-icon-after to put icon after the text.
<!-- Button With icon Before -->
<a href="#" class="btn btn-icon primary ti-briefcase">Button Icon</a>
<!-- Button With icon After -->
<a href="#" class="btn btn-icon-after primary ti-briefcase">Button Icon</a>
one more theme for the button with icon is labeled icon theme witch allow you to put an icon an shape of label into the button before or after the text with just adding class name labeled to the button.
<!-- Button With icon Before -->
<a href="#" class="btn btn-icon labeled primary ti-briefcase">Button Icon</a>
<!-- Button With icon After -->
<a href="#" class="btn btn-icon-after labeled primary ti-briefcase">Button Icon</a>