Buttons
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, .medium or .large
The color classes include: .secondary, .alert or .success
The radius classes include: .radius or .round
You can also add .disabled to any button and it will look and act disabled.
To have a button go full width use .expand class.
[row]
[one_half]
Size buttons
[button color=»normal» link=»#» target=»_blank» ]Default Button[/button]
[button color=»normal» size=»tiny» link=»#» target=»_blank» ]Tiny Button[/button]
[button color=»normal» size=»small» link=»#» target=»_blank»]Small Button[/button]
[button color=»normal» size=»large» link=»#» target=»_blank» ]Large Button[/button]
[/one_half]
[one_half]
Color buttons
[button color=»secondary» link=»#» target=»_blank» ]Secondary Button[/button]
[button color=»success» link=»#» target=»_blank» ]Success Button[/button]
[button color=»alert» link=»#» target=»_blank» ]Alert Button[/button]
[/one_half]
[/row]
[row]
[one_half]
Radius buttons
[button color=»normal» type=»radius» link=»#» target=»_blank» ]Radius Button[/button]
[button color=»normal» type=»round» link=»#» target=»_blank» ]Round Button[/button]
[/one_half]
[one_half]
Disable buttons
[button color=»normal» status=»disabled» link=»#» target=»_blank» ]Disabled Button[/button]
[button color=»alert» status=»disabled» link=»#» target=»_blank» ]Disabled Alert Button[/button]
[/one_half]
[/row]
[row]
[one_whole]
Full Width Button
[button color=»normal» size=»large» fullwidth=»expand» link=»#» target=»_blank» ]Large Button Expanded[/button]
[/one_whole]
[/row]
Button Groups
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: .radius or .round.
The even classes: .even-2 through .even-8 to control the even widths.
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 .button-bar and Foundation takes care of the rest.
Dropdown Buttons
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.
[dropbuttongroup title=»Dropdown button»][dropbutton title=»» url= «» divider= «»]item1[/dropbutton][dropbutton title=»» url= «» divider= «1»]item2[/dropbutton][dropbutton title=»» url= «» divider= «1»]item3[/dropbutton][/dropbuttongroup]
Split Buttons
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.
[dropbuttongroup type=»split» title=»Split button»][dropbutton title=»» url= «» divider= «»][/dropbutton][/dropbuttongroup]
Icon Buttons
With 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 [button color=»success» size=»tiny» link=»http://weblusive.com/epic/add-ons/retina-icons-font-awesome/» target=»_blank» ]here[/button]
[row]
[one_fourth][button color=»normal» link=»#» icon=»icon-book» target=»_blank» ]Button[/button][/one_fourth]
[one_fourth][button color=»secondary» link=»#» icon=»icon-desktop» target=»_blank»]Secondary[/button][/one_fourth]
[one_fourth][button color=»success» link=»#» icon=»icon-fighter-jet» target=»_blank»]Success[/button][/one_fourth]
[one_fourth][button color=»alert» link=»#» icon=»icon-info-sign» target=»_blank» ]Alert Button[/button][/one_fourth]
[/row]
[row]
[one_fourth][button color=»normal» size=»tiny» link=»#» icon=»icon-book» target=»_blank» ]Button[/button][/one_fourth]
[one_fourth][button color=»normal» size=»small» link=»#» icon=»icon-book» target=»_blank» ]Button[/button][/one_fourth]
[one_fourth][button color=»normal» link=»#» icon=»icon-book» target=»_blank» ]Button[/button][/one_fourth]
[one_fourth][button color=»normal» size=»large» link=»#» icon=»icon-book» target=»_blank» ]Button[/button][/one_fourth]
[/row]