Buttons

  1. Transparent Buttons
  2. Button Sizes
  3. Button Colors
  4. Block-Level Buttons
  5. Buttons With Icons
  6. Button Groups
  7. Close Buttons
  8. Play Buttons
  9. Menu Toggle Buttons

Default button styling is applied automatically to form submission buttons and also to standards links with class btn. Also, for best compatibility use btn-default class when possible to get the default button color applied.

Link

Link


Transparent Buttons

To give a button a transparent background, with just a wrapping border, add class btn-trans.

Link

Link


Button Sizes

Button sizes can be applied by adding classes btn-xs, btn-sm, btn-lg, btn-xl, btn-xxl and btn-xxl.

Example Color CSS Class
Click Here X-Small btn btn-default btn-xs
Click Here Small btn btn-default btn-sm
Click Here Default btn btn-default
Click Here Large btn btn-default btn-lg
Click Here X-Large btn btn-default btn-xl
Click Here XX-Large btn btn-default btn-xxl
Click Here XXX-Large btn btn-default btn-xxxl

Button Colors

Branding

Example Color CSS Class
Click Here Primary btn btn-primary
Click Here Primary btn btn-primary btn-trans
Click Here Secondary btn btn-secondary
Click Here Secondary btn btn-secondary btn-trans

Contextual

Example Color CSS Class
Click Here Success btn btn-success
Click Here Success btn btn-success btn-trans
Click Here Information btn btn-info
Click Here Information btn btn-info btn-trans
Click Here Warning btn btn-warning
Click Here Warning btn btn-warning btn-trans
Click Here Danger btn btn-danger
Click Here Danger btn btn-danger btn-trans

Color Library

Example Color CSS Class
Click Here Asphalt btn btn-asphalt
Click Here Asphalt btn btn-asphalt btn-trans
Click Here Black btn btn-black
Click Here Black btn btn-black btn-trans
Click Here Blue btn btn-blue
Click Here Blue btn btn-blue btn-trans
Click Here Brown btn btn-brown
Click Here Brown btn btn-brown btn-trans
Click Here Concrete btn btn-concrete
Click Here Concrete btn btn-concrete btn-trans
Click Here Cream btn btn-cream
Click Here Cream btn btn-cream btn-trans
Click Here Crimson btn btn-crimson
Click Here Crimson btn btn-crimson btn-trans
Click Here Dark Blue btn btn-dark-blue
Click Here Dark Blue btn btn-dark-blue btn-trans
Click Here Dark Brown btn btn-dark-brown
Click Here Dark Brown btn btn-dark-brown btn-trans
Click Here Dark Green btn btn-dark-green
Click Here Dark Green btn btn-dark-green btn-trans
Click Here Dark Purple btn btn-dark-purple
Click Here Dark Purple btn btn-dark-purple btn-trans
Click Here Forest btn btn-forest
Click Here Forest btn btn-forest btn-trans
Click Here Green btn btn-green
Click Here Green btn btn-green btn-trans
Click Here Jungle btn btn-jungle
Click Here Jungle btn btn-jungle btn-trans
Click Here Light btn btn-light
Click Here Light btn btn-light btn-trans
Click Here Mauve btn btn-mauve
Click Here Mauve btn btn-mauve btn-trans
Click Here Orange btn btn-orange
Click Here Orange btn btn-orange btn-trans
Click Here Peach btn btn-peach
Click Here Peach btn btn-peach btn-trans
Click Here Pearl btn btn-pearl
Click Here Pearl btn btn-pearl btn-trans
Click Here Pink btn btn-pink
Click Here Pink btn btn-pink btn-trans
Click Here Pomegranate btn btn-pomegranate
Click Here Pomegranate btn btn-pomegranate btn-trans
Click Here Purple btn btn-purple
Click Here Purple btn btn-purple btn-trans
Click Here Red btn btn-red
Click Here Red btn btn-red btn-trans
Click Here Royal btn btn-royal
Click Here Royal btn btn-royal btn-trans
Click Here Slate Grey btn btn-slate-grey
Click Here Slate Grey btn btn-slate-grey btn-trans
Click Here Silver btn btn-silver
Click Here Silver btn btn-silver btn-trans
Click Here Steel Blue btn btn-steel-blue
Click Here Steel Blue btn btn-steel-blue btn-trans
Click Here Teal btn btn-teal
Click Here Teal btn btn-teal btn-trans
Click Here Turquoise btn btn-turquoise
Click Here Turquoise btn btn-turquoise btn-trans
Click Here Yellow btn btn-yellow
Click Here Yellow btn btn-yellow btn-trans
Click Here Wheat btn btn-wheat
Click Here Wheat btn btn-wheat btn-trans
Click Here White btn btn-white
Click Here White btn btn-white btn-trans

Block-Level Buttons

Create block-level buttons — those that span the full width of a parent — by adding class btn-block.

Click Here

Click Here

Buttons With Icons

When pairing a FontAwesome icon with a button, add classes before or after to the icons to aid in spacing them nicely within the buttons.

Follow Me on Twitter

Follow Me on Twitter

Read More

Read More

Button Groups

Button groups require the class btn-group but can be structured as an element with buttons within.

Standard Button Group


Tight Button Group

To eliminate the spacing between buttons of a group, add the class btn-group-tight.


Button Group Alignment

By default, buttons will be aligned to the start of the .btn-group container, but you can can add classes btn-group-align-center or btn-group-align-end to change that.






Justified Button Group

For a justified button group or a row of buttons with equal widths, add class btn-group-justified, but the group must be structured as an unordered list.


You can also use class btn-group-tight in this scenario, as well. In the following example button color classes have been added to show the separation of buttons from each other.


A justified button group can also be very useful when you just want a couple of buttons to match in width. In the example below we've styled the .btn-group element to have max-width: 400px and auto left and right margin.


Note: Because a justified button group's buttons will automatically expand to have equal width and fill the container, it generally won't make sense to mix .btn-group-justified with alignment classes.

Button Group Sizing

Include buttons from any of the sizes above in your button groups.














Pagination

To add a little extra styling for a button group meant to serve as pagination, add the class pagination to it.


Close Buttons















Play 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
	
		
	

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(){

	var $el = $(this);

	if ( $el.hasClass('collapse') ) {

		$el.removeClass('collapse');

		// Code to close your menu...

	} else {

		$el.addClass('collapse');

		// Code to open your menu...

	}

	return false;

});