Buttons
Buttons are a convenient tool when it comes to more traditional actions. To that end, Foundation includes a lot of easy to use button styles that you can customize or override.
Foundation buttons have a number of parameters and styles — you can see a few examples below. The out of the box classes include size, type (color) and style (square, slightly rounded, and completely rounded).
Button classes can also be applied to button elements, as well as input type="submit" elements.
Button Groups
When you need a group of actions, button groups give you some easy-to-use options.
Button Group - Radius
A button group is simply a ul.button-group in which each li contains a button. You can attach a button style, such as radius or rounded, to the entire group, and Foundation will apply the style to the first and last buttons in the group.
Even Button Groups
If you want a button group to fill a grid column with evenly sized actions, you can simply add two classes to the group: .even and either .two-up, .three-up, .four-up, or .five-up.
Button Bars
A button bar is a group of button groups (I N C E P T I O N), 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 div.button-bar and Foundation takes care of the rest.
Buttons within groups or bars can also be individually set to a particular type (color) or size. Obviously if you create a button bar with different sized buttons the visual presentation may suffer a bit, but we wanted these to be very flexible.
Dropdown Buttons
Foundation 3 includes two types of dropdown buttons: buttons which create a dropdown when you click them and buttons which have a dropdown when you click specifically on the down-arrow part of the button (a split button). These are useful when an action has several possible outcomes to select from, or when there are secondary choices you can make in lieu of a primary action.
Dropdown Buttons
Dropdown buttons use the same classes as any other button, but a different structure.
Split Button
Split buttons in turn use similar classes, and a different structure than regular or dropdown buttons.
Notice that in a split button, the span is the dropdown affordance and the main anchor is the primary button action.