Buttons
Use Gameforest's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Example
Gameforest includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. Use any of the available button classes to quickly create a styled button.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-link">Link</button>Button tags
The .btn classes are designed to be used with the button element. However, you can also use these classes on <a> or <input> elements.
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">Outline buttons
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with .btn-outline-* ones to remove all background images and colors on any button.
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-dark">Dark</button>Sizes
Buttons can be used with three kind of custom sizes as .btn-lg, .btn-sm or .btn-xs.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>Icons
Add .btn-icon-alignment to set the icon position in button tags. It is not required to add the alignment class if the default statement is right.
<button type="button" class="btn btn-primary">Primary <i class="fa fa-heart-o"></i></button>
<button type="button" class="btn btn-success">Success <i class="fa fa-check"></i></button>
<button type="button" class="btn btn-info btn-icon-left"><i class="fa fa-bell"></i> Info</button>
<button type="button" class="btn btn-warning btn-icon-left"><i class="fa fa-volume-up"></i> Warning</button>
<button type="button" class="btn btn-danger">Danger <i class="fa fa-trash"></i></button>
<button type="button" class="btn btn-dark">Dark <i class="fa fa-cog"></i></button>
<button type="button" class="btn btn-default">Default <i class="fa fa-refresh"></i></button>
<button type="button" class="btn btn-secondary">Secondary <i class="fa fa-refresh"></i></button>Customized
It is also possible to customize your button with shadow, effect or rounded custom classes like below. Add to the button one of these classes and button will looks like in the example.
<button type="button" class="btn btn-primary btn-lg btn-rounded btn-shadow">Shadow</button>
<button type="button" class="btn btn-primary btn-lg btn-rounded btn-shadow btn-effect">Effect</button>
<button type="button" class="btn btn-primary btn-shadow btn-effect">Button</button>
<button type="button" class="btn btn-outline-primary btn-effect">Button</button>