Buttons
Styles, Sizes & Options
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
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.
Dropdown Buttons
Standard Dropdown 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 use the same classes as any other button, but a different structure. If you need your dropdown to go up, simple add a class of .up to .button.dropdown.
Split Button
Split buttons in turn use similar classes, and a different structure than regular or dropdown buttons. They require an affordance for the clickable area that engages the dropdown and for the normal button action. We use a <span> for this affordance.