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. [row] 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.
\nBuilding buttons using our predefined classes is simple, you’ll need an < a> <\/code>, < button> <\/code> or < input> <\/code> with a class of .button<\/code>. This will create a default medium button. You can also use size, color and radius classes to control more of the style.
\nThe class options:
\nThe size classes include: .tiny<\/code>, .small<\/code>, .medium<\/code> or .large<\/code>
\nThe color classes include: .secondary<\/code>, .alert<\/code> or .success<\/code>
\nThe radius classes include: .radius<\/code> or .round<\/code>
\nYou can also add .disabled<\/code> to any button and it will look and act disabled.
\nTo have a button go full width use .expand<\/code> class.<\/p>\n
\nSize buttons<\/h5>\n
\n[button color=\u00bbnormal\u00bb link=\u00bb#\u00bb target=\u00bb_blank\u00bb ]Default Button[\/button]
\n[button color=\u00bbnormal\u00bb size=\u00bbtiny\u00bb link=\u00bb#\u00bb target=\u00bb_blank\u00bb ]Tiny Button[\/button]
\n[button color=\u00bbnormal\u00bb size=\u00bbsmall\u00bb link=\u00bb#\u00bb target=\u00bb_blank\u00bb]Small Button[\/button]
\n[button color=\u00bbnormal\u00bb size=\u00bblarge\u00bb link=\u00bb#\u00bb target=\u00bb_blank\u00bb ]Large Button[\/button]
<\/div>
\nColor buttons<\/h5>\n
\n[button color=\u00bbsecondary\u00bb link=\u00bb#\u00bb target=\u00bb_blank\u00bb ]Secondary Button[\/button]
\n[button color=\u00bbsuccess\u00bb link=\u00bb#\u00bb target=\u00bb_blank\u00bb ]Success Button[\/button]
\n[button color=\u00bbalert\u00bb link=\u00bb#\u00bb \u00a0target=\u00bb_blank\u00bb ]Alert Button[\/button]
<\/div>
\n[\/row]
\n[row]
\nRadius buttons<\/h5>\n
\n[button color=\u00bbnormal\u00bb type=\u00bbradius\u00bb link=\u00bb#\u00bb target=\u00bb_blank\u00bb ]Radius Button[\/button]
\n[button color=\u00bbnormal\u00bb type=\u00bbround\u00bb link=\u00bb#\u00bb target=\u00bb_blank\u00bb ]Round Button[\/button]
<\/div>
\nDisable buttons<\/h5>\n
\n[button color=\u00bbnormal\u00bb status=\u00bbdisabled\u00bb link=\u00bb#\u00bb target=\u00bb_blank\u00bb ]Disabled Button[\/button]
\n[button color=\u00bbalert\u00bb status=\u00bbdisabled\u00bb link=\u00bb#\u00bb target=\u00bb_blank\u00bb ]Disabled Alert Button[\/button]
<\/div>
\n[\/row]
\n[row]
\n[one_whole]<\/p>\nFull Width Button<\/h5>\n
\n[button color=\u00bbnormal\u00bb size=\u00bblarge\u00bb fullwidth=\u00bbexpand\u00bb link=\u00bb#\u00bb target=\u00bb_blank\u00bb ]Large Button Expanded[\/button]
\n[\/one_whole]
\n[\/row]<\/p>\n
\nButton Groups<\/h3>\n
\nBuilding button groups using our predefined classes is a breeze, you’ll just wrap a button inside an < ul><\/code>.
\nThe 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.
\nYou 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.
\nThe radius classes: .radius<\/code> or .round<\/code>.
\nThe even classes: .even-2<\/code> through .even-8<\/code> to control the even widths.
\n<\/p>\n