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.
<a href="#" class="btn btn-primary loading">Loading...</a>
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
<button class="fs-close close-xl">Close</button>
<button class="fs-close close-lg">Close</button>
<button class="fs-close close-md">Close</button>
<button class="fs-close close-sm">Close</button>
<button class="fs-close close-xl close-light">Close</button>
<button class="fs-close close-lg close-light">Close</button>
<button class="fs-close close-md close-light">Close</button>
<button class="fs-close close-sm close-light">Close</button>
Play Buttons
<button class="fs-play play-xl">Play</button>
<button class="fs-play play-lg">Play</button>
<button class="fs-play play-md">Play</button>
<button class="fs-play play-sm">Play</button>
<button class="fs-play play-xl play-light">Play</button>
<button class="fs-play play-lg play-light">Play</button>
<button class="fs-play play-md play-light">Play</button>
<button class="fs-play play-sm play-light">Play</button>
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.
<!-- Sizes sm, md, lg, and xl - For use on light background. -->
<a href="#" class="fs-menu-toggle menu-toggle-xl" title="Toggle Menu">
<span class="hamburger">
<span></span>
</span>
<span class="sr-only">Toggle Menu</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-lg" title="Toggle Menu">
<span class="hamburger">
<span></span>
</span>
<span class="sr-only">Toggle Menu</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-md" title="Toggle Menu">
<span class="hamburger">
<span></span>
</span>
<span class="sr-only">Toggle Menu</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-sm" title="Toggle Menu">
<span class="hamburger">
<span></span>
</span>
<span class="sr-only">Toggle Menu</span>
</a>
<!-- Sizes sm, md, lg, and xl - For use on dark background. -->
<a href="#" class="fs-menu-toggle menu-toggle-light menu-toggle-xl" title="Toggle Menu">
<span class="hamburger">
<span></span>
</span>
<span class="sr-only">Toggle Menu</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-light menu-toggle-lg" title="Toggle Menu">
<span class="hamburger">
<span></span>
</span>
<span class="sr-only">Toggle Menu</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-light menu-toggle-md" title="Toggle Menu">
<span class="hamburger">
<span></span>
</span>
<span class="sr-only">Toggle Menu</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-light menu-toggle-sm" title="Toggle Menu">
<span class="hamburger">
<span></span>
</span>
<span class="sr-only">Toggle Menu</span>
</a>
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.
<!-- Sizes sm, md, lg, and xl - For use on light background. -->
<a href="#" class="fs-menu-toggle menu-toggle-xl" title="Toggle Menu">
<span class="hamburger">
<span></span>
</span>
<span class="text-after">Menu</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-lg" title="Toggle Menu">
<span class="hamburger">
<span></span>
</span>
<span class="text-after">Menu</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-md" title="Toggle Menu">
<span class="hamburger">
<span></span>
</span>
<span class="text-after">Menu</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-sm" title="Toggle Menu">
<span class="hamburger">
<span></span>
</span>
<span class="text-after">Menu</span>
</a>
<!-- Sizes sm, md, lg, and xl - For use on dark background. -->
<a href="#" class="fs-menu-toggle menu-toggle-light menu-toggle-xl" title="Toggle Menu">
<span class="hamburger">
<span></span>
</span>
<span class="text-after">Menu</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-light menu-toggle-lg" title="Toggle Menu">
<span class="hamburger">
<span></span>
</span>
<span class="text-after">Menu</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-light menu-toggle-md" title="Toggle Menu">
<span class="hamburger">
<span></span>
</span>
<span class="text-after">Menu</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-light menu-toggle-sm" title="Toggle Menu">
<span class="hamburger">
<span></span>
</span>
<span class="text-after">Menu</span>
</a>
Click menu toggle buttons above to see sample animations.
<!-- Sizes sm, md, lg, and xl - For use on light background. -->
<a href="#" class="fs-menu-toggle menu-toggle-xl" title="Toggle Menu">
<span class="text-before">Menu</span>
<span class="hamburger">
<span></span>
</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-lg" title="Toggle Menu">
<span class="text-before">Menu</span>
<span class="hamburger">
<span></span>
</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-md" title="Toggle Menu">
<span class="text-before">Menu</span>
<span class="hamburger">
<span></span>
</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-sm" title="Toggle Menu">
<span class="text-before">Menu</span>
<span class="hamburger">
<span></span>
</span>
</a>
<!-- Sizes sm, md, lg, and xl - For use on dark background. -->
<a href="#" class="fs-menu-toggle menu-toggle-light menu-toggle-xl" title="Toggle Menu">
<span class="text-before">Menu</span>
<span class="hamburger">
<span></span>
</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-light menu-toggle-lg" title="Toggle Menu">
<span class="text-before">Menu</span>
<span class="hamburger">
<span></span>
</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-light menu-toggle-md" title="Toggle Menu">
<span class="text-before">Menu</span>
<span class="hamburger">
<span></span>
</span>
</a>
<a href="#" class="fs-menu-toggle menu-toggle-light menu-toggle-sm" title="Toggle Menu">
<span class="text-before">Menu</span>
<span class="hamburger">
<span></span>
</span>
</a>
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...
}
});