Buttons are a convenient tool when it comes to more traditional actions. To that end, Foundation has a lot of easy to use button styles that you can customize or override to fit your needs.
Building buttons using our predefined classes is simple, you'll need an
< a> ,
< button> or
< input> with a class of
.button. This will create a default medium button. You can also use size, color and radius classes to control more of the style.
The class options:
The size classes include:
The color classes include:
The radius classes include:
You can also add
.disabled to any button and it will look and act disabled.
To have a button go full width use
Size buttonsStandard Button
Color buttonsSecondary Button
Radius buttonsRadius Button
Disable buttonsDisabled Button
Disabled Alert Button
Radius buttonsLarge button expanded
With the help of Font Awesome you can build buttons using icons and button classes.Button Secondary Button Success Button Alert Button Black Button
Button Button Button Button
Font Awesome Retina Display Icons.
The iconic font designed for Retina Displays
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. 361 icons in a single collection. Scalable vector graphics means every icon looks awesome at any size.
Button groups are great when you need to display a group of actions in a bar. These build off the button styles and work perfectly with the grid.
Building button groups using our predefined classes is a breeze, you'll just wrap a button inside an
The button styles will work the same as they do when building a single button, but they'll float next to each other to create a group.
You also have access to the same radius classes as buttons, only they'll go on the unordered list instead of the button. You can even make sure the buttons take up even space within the container you put them in.
The radius classes:
The even classes:
.even-8 to control the even widths.
A button bar is a group of button groups, perfect for situations where you want groups of actions that are all related to a similar element or page. Simply wrap two or more button groups in a .button-bar and Foundation takes care of the rest.
We've simplified our dropdown buttons by getting rid of the dedicated dropdown associated with them. Instead, you'll use our new dropdown plugin to attach a dropdown to the button style of your choice.Dropdown Button Dropdown Button Dropdown Button
We've simplified our split buttons by getting rid of the dedicated dropdown associated with them. Instead, you'll use our new dropdown plugin to attach a dropdown to the button style of your choice.Split Button Split Button Split Button