Button
The button type block adds additional buttons that aren't a part of the framework's core button styling.
Loading Buttons
Give any button a loading effect by adding the loading class to it.
Loading...
The following examples demonstrate or more common usage scenario, utilizing a submission <button> of a form that's been disabled and given the loading class. Also they show how the effect adapts to different sizes and colors of buttons.
Close Buttons
Play Buttons
Menu Toggle Buttons
For toggling your hidden menus open and closed, you can use the menu toggle button. Buttons with class fs-menu-toggle use CSS animation to animate the state of the contained "hamburger" to an "X" when class collapse is added.
The menu toggle buttons come in four sizes which can be utilized with the classes menu-toggle-sm, menu-toggle-md, menu-toggle-lg and menu-toggle-xl. And for using these buttons on a dark background, add the class menu-toggle-light.
If you click the buttons in the following examples, you can see a sample of the button animations. To create a similar action in your website, you will need to use JavaScript; see example here.
Click menu toggle buttons above to see sample animations.
Toggle Menu Toggle Menu Toggle Menu Toggle Menu Toggle Menu Toggle Menu Toggle Menu Toggle Menu
Feel free to hold your own opinion on if the "Hamburger" button should be accompanied by text to help the user. Whether you want to do this will probably depend on your website's audience.
When using the .fs-menu-toggle element, you can add <span class="text-before">Menu</span> for text before the icon or <span class="text-after">Menu</span> for text after the icon.
Click menu toggle buttons above to see sample animations.
Menu Menu Menu Menu Menu Menu Menu Menu
Click menu toggle buttons above to see sample animations.
Menu Menu Menu Menu Menu Menu Menu Menu
JavaScript Required
In order for the menu button to actually change states and perform any kind of action, you'd need to use JavaScript. The following is the JavaScript used in the above examples, which utilizes jQuery. — You can see that by simply toggling the class collapse on and off of the .fs-menu-toggle button, that we can achieve the button's animation since it's done with CSS.
$('.fs-menu-toggle').on('click', function(event){
event.preventDefault();
var $el = $(this);
if ($el.hasClass('collapse')) {
$el.removeClass('collapse');
// Code to close your menu...
} else {
$el.addClass('collapse');
// Code to open your menu...
}
});