Foundation - Button Group Coloring

Description

Each button in the button group can be colored individually or every button can be colored by using the same class.

Example

The following example demonstrates how to color button group in Foundation.

Live Demo 
<html>
   <head>
      <title>Button Group Coloring</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

   </head>

   <body>
      <div class = "button-group">
         <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>

      <div class = "success button-group">
         <a class = "button">Button</a>
         <a class = "button">With</a>
         <a class = "button">Success</a>
         <a class = "button">Class</a>
      </div>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given html code button_group_coloring.html file.

  • Open this HTML file in a browser, an output is displayed as shown below.

foundation_basic_controls.htm
Advertisements