Foundation CSS Button Group Split
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Foundation CSS offers us a Button Group where buttons of identical nature can be grouped together. Foundation CSS allows the buttons in the button group to be split up where each button is moved apart with a consistent border. To split a button into n buttons, we should create n buttons inside the button group.
Foundation CSS Button Group Split Classes:
- arrow-only: Create a button containing only an arrow.
- show-for-sr: Hides the text from the view but can be caught by screen readers for better accessibility.
Syntax:
<div class="button-group">
<a class="button">...</a>
<a class="button Button-Group-Split-Class>
...
</a>
</div>Example 1: In the below example, we have created a simple split button
HTML
<!DOCTYPE html><html lang="en"><head> <title>Foundation CSS Button Group Split</title> <!-- Compressed CSS --> <link rel="stylesheet" href= <link rel="stylesheet" href="/cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/> <!-- Compressed JavaScript --> <script src= </script> <script src= </script> <link rel="stylesheet" href= integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer"/></head> <body class="grid-x align-middle align-center grid-container" style="height: 95vh; width: 100vw"> <div> <h2 style="color: green">GeekforGeeks</h2> <h4>Foundation CSS Button Group Split</h4> <div class="button-group"> <a class="button">Select</a> <a class="button"> <i class="fa-solid fa-gear"></i> </a> </div> </div> <script> $(document).ready(function () { $(document).foundation(); }); </script></body></html> |
Output:
Foundation CSS Button Group Split
Example 2: In the below example, we have created a hover-able split button
HTML
<!DOCTYPE html><html lang="en"><head> <title>Foundation CSS Button Group Split</title> <!-- Compressed CSS --> <link rel="stylesheet" href= <link rel="stylesheet" href="/cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/> <!-- Compressed JavaScript --> <script src= </script> <script src= </script> <link rel="stylesheet" href= integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer"/></head> <body class="grid-x align-middle align-center grid-container" style="height: 95vh; width: 100vw"> <div> <h2 style="color: green">GeekforGeeks</h2> <h4>Foundation CSS Button Group Split</h4> <div class="button-group"> <a class="button">Hover</a> <a class="button" type="button" data-toggle="hover"> <i class="fa-solid fa-arrow-down"></i> </a> <div class="dropdown-pane" id="hover" data-dropdown data-hover="true" data-hover-pane="true" > You can see me when hovered. </div> </div> </div> <script> $(document).ready(function () { $(document).foundation(); }); </script> </body></html> |
Output:
Foundation CSS Button Group Split
Reference: https://get.foundation/sites/docs/button-group.html#split-buttons
Please Login to comment...