Buttons
Use Impact Front’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Buttons
The following are the default style of buttons from Impact Front. Use the modified classes (ie. btn-primary or btn-secondary) to change colors:
<button class="btn mb-2 mr-2 btn-primary" type="button">Primary</button>
<button class="btn mb-2 mr-2 btn-secondary" type="button">Secondary</button>
<button class="btn mb-2 mr-2 btn-tertiary" type="button">Tertiary</button>
<button class="btn mb-2 mr-2 btn-success" type="button">Success</button>
<button class="btn mb-2 mr-2 btn-warning" type="button">Warning</button>
<button class="btn mb-2 mr-2 btn-danger" type="button">Danger</button>
<button class="btn mb-2 mr-2 btn-info" type="button">Info</button>
<button class="btn mb-2 mr-2 btn-dark" type="button">Dark</button>
<button class="btn mb-2 mr-2 btn-gray" type="button">Gray</button>
<button class="btn mb-2 mr-2 btn-light" type="button">Light</button>
<button class="btn mb-2 mr-2 btn-white" type="button">White</button>Buttons with outline
Use the following modifier class to add colors only to the outline of the button. Can be used very well when there are two buttons in the layout but the outlined one is of secondary importance:
<button class="btn mb-2 mr-2 btn-outline-primary" type="button">Primary</button>
<button class="btn mb-2 mr-2 btn-outline-secondary" type="button">Secondary</button>
<button class="btn mb-2 mr-2 btn-outline-tertiary" type="button">Tertiary</button>
<button class="btn mb-2 mr-2 btn-outline-success" type="button">Success</button>
<button class="btn mb-2 mr-2 btn-outline-warning" type="button">Warning</button>
<button class="btn mb-2 mr-2 btn-outline-danger" type="button">Danger</button>
<button class="btn mb-2 mr-2 btn-outline-info" type="button">Info</button>
<button class="btn mb-2 mr-2 btn-outline-dark" type="button">Dark</button>
<button class="btn mb-2 mr-2 btn-outline-gray" type="button">Gray</button>
<button class="btn mb-2 mr-2 btn-outline-light" type="button">Light</button>
<button class="btn mb-2 mr-2 btn-outline-white" type="button">White</button>Pill buttons
Adding the .btn-pill modifier class will add a larger amount of border radius to the button:
<button class="btn mb-2 mr-2 btn-pill btn-primary" type="button">Primary</button>
<button class="btn mb-2 mr-2 btn-pill btn-outline-primary" type="button">Primary</button>Buttons with icon
Example with buttons coupled with an icon:
<button class="btn mb-2 mr-2 btn-outline-primary" type="button"><i class="far fa-heart mr-2"></i>Primary</button>
<button class="btn mb-2 mr-2 btn-outline-secondary" type="button"><i class="far fa-thumbs-up mr-2"></i>Secondary</button>Circle buttons
You can use the border utility class, like .rounded-circle if you want circle button.
<button class="btn mb-2 mr-2 btn-icon-only btn-primary" type="button">
<span class="btn-inner-icon"><i class="far fa-heart"></i></span>
</button>
<button class="btn mb-2 mr-2 btn-icon-only rounded-circle btn-primary" type="button">
<span class="btn-inner-icon"><i class="far fa-thumbs-up"></i></span>
</button>Button animations
In todays world well animated elements can make the difference between good and great layouts. Use animation modifier classes .animate-*-# (eg. .animate-up-1, .animate-down-3). You can use up, right, down and bottom and use a counter from 1 to 5 to specify the distance in pixels.
<button class="btn mb-2 mr-2 btn-primary animate-up-2" type="button">Animate up</button>
<button class="btn mb-2 mr-2 btn-secondary animate-right-3" type="button">Animate right</button>
<button class="btn mb-2 mr-2 btn-tertiary animate-left-3" type="button">Animate left</button>
<button class="btn mb-2 mr-2 btn-success animate-down-2" type="button">Animate down</button>Dropdown buttons
Example of using a dropdown menu with a button:
<div class="btn-group mr-2 mb-2">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-angle-down dropdown-arrow"></i>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group mr-2 mb-2">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split border-top-right-radius-0 border-bottom-right-radius-0"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-angle-down dropdown-arrow"></i>
<span class="sr-only">Toggle Dropdown</span>
</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group mb-2 mr-2">
<button type="button" class="btn btn-tertiary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-angle-down dropdown-arrow"></i>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>Social media buttons
Use the following buttons for social media related actions:
<button class="btn mb-2 mr-2 btn-icon btn-twitter" type="button">
<span class="btn-inner-icon"><i class="fab fa-twitter"></i></span>
<span class="btn-inner-text">Login with Twitter</span>
</button>
<button class="btn mb-2 mr-2 btn-icon btn-pill btn-facebook" type="button">
<span class="btn-inner-icon"><i class="fab fa-twitter"></i></span>
<span class="btn-inner-text">Login with Facebook</span>
</button>
<button class="btn mb-2 mr-2 btn-icon-only btn-github" type="button">
<span class="btn-inner-icon"><i class="fab fa-github"></i></span>
</button>
<button class="btn mb-2 mr-2 btn-icon-only btn-pill btn-dribbble" type="button">
<span class="btn-inner-icon"><i class="fab fa-dribbble"></i></span>
</button>Button sizing & states
Use the following modifier classes to update the size & state of the button.
Button size
With Impact Front there are 3 sizes for button: .btn-sm, .btn-md and .btn-lg:
<button class="btn mb-2 mr-2 btn-sm btn-primary" type="button">Small</button>
<button class="btn mb-2 mr-2 btn-primary" type="button">Regular</button>
<button class="btn mb-2 mr-2 btn-lg btn-primary" type="button">Large Button</button>Block level Buttons
With Impact Front there are 3 sizes for button: .btn-sm, .btn-md and .btn-lg:
<button class="btn mb-2 mr-2 btn-sm btn-primary" type="button">Small</button>
<button class="btn mb-2 mr-2 btn-primary" type="button">Regular</button>
<button class="btn mb-2 mr-2 btn-lg btn-primary" type="button">Large Button</button>Disabled state
Make buttons look inactive by adding the disabled boolean attribute to any <button> element.
<button type="button" class="btn mb-2 mr-2 btn-primary" disabled>Primary button</button>
<button type="button" class="btn mb-2 mr-2 btn-secondary" disabled>Button</button>