Skip to content
Related Articles
Open in App
Not now

Related Articles

Foundation CSS Button Group Coloring

Improve Article
Save Article
  • Last Updated : 09 Mar, 2022
Improve Article
Save Article

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.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
</head>
    
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>Foundation CSS Button Group Coloring</h3>
   
    <div class="button-group">
      <a class="primary button">Primary</a>
      <a class="secondary button">Secondary</a>
      <a class="success button">Success</a>
      <a class="warning button">Warning</a>
      <a class="alert button">Alert</a>
    </div>
</body>
    
</html>


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.

HTML




<!DOCTYPE html>
<html lang="en">
    
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
</head>
    
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>Foundation CSS Button Group Coloring</h3>
   
    <strong>Primary Button Group Coloring:</strong>
        <div class="primary button-group">
      <a class="button">Button 1</a>
      <a class="button">Button 2</a>
    </div>
  
    <strong>Secondary Button Group Coloring:</strong>
    <div class="secondary button-group">
      <a class="button">Button 1</a>
      <a class="button">Button 2</a>
    </div>
  
    <strong>Success Button Group Coloring:</strong>
    <div class="success button-group">
      <a class="button">Button 1</a>
      <a class="button">Button 2</a>
    </div>
  
    <strong>Warning Button Group Coloring:</strong>
    <div class="warning button-group">
      <a class="button">Button 1</a>
      <a class="button">Button 2</a>
    </div>
  
    <strong>Alert Button Group Coloring:</strong>
    <div class="alert button-group">
      <a class="button">Button 1</a>
      <a class="button">Button 2</a>
    </div>
</body>
    
</html>


Output:

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!