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: .tiny, .small, .mediumor .large
The color classes include: .secondary, .alertor .success
The radius classes include: .radiusor .round
You can also add .disabledto any button and it will look and act disabled.
To have a button go full width use .expandclass.
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 <ul>.
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: .radiusor .round.
The even classes: .even-2through .even-8to 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 ButtonWe'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 ButtonWith the help of Font Awesome you can build buttons using icons and button classes. You can see the list of icons that you can use here
ButtonSecondary ButtonSuccess ButtonAlert Button