Foundation CSS Button Group Coloring

Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster. It offers the Fastclick.js tool for faster rendering on mobile devices.  

Buttons are one of the most common UI elements. We can create a button using the button class and use button-group class to make a button group element. Button Group Coloring is used to give colors to the buttons. The buttons can be colored using secondary, success, warning, alert classes. In this article, we will learn about Button Group Coloring in Foundation CSS.

Foundation CSS Button Group Coloring Classes:

• primary: This class is used for setting the color of the button to the primary color of the palette. The primary color is blue.
• secondary: This class is used for setting the color of the button to the secondary color of the palette. The secondary color is gray.
• success: This class is used for setting the color of the button to the success color of the palette. The success color is green.
• alert: This class is used for setting the color of the button to the alert color of the palette. The alert color is red.
• warning: This class is used for setting the color of the button to the warning color of the palette. The warning color is yellow.

Syntax:

<a class="color-class button">...</a>

Example 1: The following code demonstrates Button Group Coloring.

Output:

Example 2: The following code demonstrates Button Group Coloring with the same class. The entire button group can be colored using the same classes.

Output:

Reference: https://get.foundation/sites/docs/button-group.html#coloring