A 'button group' consists of some buttons - or button links - stuck into a container with the class name .button-group. All the classes for colours, sizes and otherwise look and feel mentioned on the 'Buttons' page can be used.
If you want to have all buttons looking the same, you can add e.g. the colour class directly to the .button-group container. If you want different colours, you add those classes directly to the single .buttons. It can also be mixed in that e.g. you can add .hollowto the container and still make a button or two .disabled.
The buttons will normally expand the width in accordance with the text on them. If you want to have all buttons the same width, you add the class .expanded to the container.
The 'split' button is very often used in connection with dropdowns. Here it is on it's own. It consists of two buttons, where the second one has the class name .dropdown added, and the actual text on it has been removed. The newest version of Foundation has a special class for it, which eventually also will be incorporated in Site Designer.
The buttons shown on the page 'Custom Buttons' can also be used in button groups.See the Foundation pages for more tips and ideas.
Download the component with all Buttons Looking the Same
Download the component with Different Coloured Buttons
Button Groups
A 'button group' consists of some buttons - or button links - stuck into a container with the class name .button-group. All the classes for colours, sizes and otherwise look and feel mentioned on the 'Buttons' page can be used.
If you want to have all buttons looking the same, you can add e.g. the colour class directly to the .button-group container. If you want different colours, you add those classes directly to the single .buttons. It can also be mixed in that e.g. you can add .hollow to the container and still make a button or two .disabled.
The buttons will normally expand the width in accordance with the text on them. If you want to have all buttons the same width, you add the class .expanded to the container.
The 'split' button is very often used in connection with dropdowns. Here it is on it's own. It consists of two buttons, where the second one has the class name .dropdown added, and the actual text on it has been removed. The newest version of Foundation has a special class for it, which eventually also will be incorporated in Site Designer.
The buttons shown on the page 'Custom Buttons' can also be used in button groups.See the Foundation pages for more tips and ideas.
Download the component with all Buttons Looking the Same
Download the component with Different Coloured Buttons
Download the component with Expanded Buttons
Download the Split Buttons component