Foundation CSS Button Group Hollow and Clear
Last Updated :
09 Mar, 2022
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 Hollow and clear is used to give the hollow and clear styles to the buttons. The buttons can be styled individually or we can style the entire group using the same class. In this article, we will discuss Button Group Hollow and Clear in Foundation CSS.
Foundation CSS Button Group Hollow and Clear Classes:
- hollow: This class is used to give a hollow style to the button. In this, only the border and text of the button are visible.
- clear: This class is used to give clear style to the button. In this, only the button’s text is visible.
Syntax:
<a class="button hollow">....</a>
<a class="button clear">....</a>
Example 1: The following code demonstrates Button Group Hollow style to style the buttons individually and to style the entire group using the same class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Button Group Hollow & clear</h3>
<strong>
Using individual <i>hollow</i> class
</strong>
<div class="button-group">
<a class="primary button hollow">
Primary
</a>
<a class="secondary button hollow">
Secondary
</a>
<a class="success button hollow">
Success
</a>
<a class="warning button hollow">
Warning
</a>
<a class="alert button hollow">Alert
</a>
</div>
<strong>
Style entire group using <i>hollow</i> class
</strong>
<div class="button-group hollow">
<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 Clear style to style the buttons individually and to style the entire group using the same class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
</head>
<body style="padding:1%">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Button Group Hollow & clear</h3>
<strong>
Using individual <i>clear</i> class
</strong>
<div class="button-group">
<a class="primary button clear">
Primary
</a>
<a class="secondary button clear">
Secondary
</a>
<a class="success button clear">
Success
</a>
<a class="warning button clear">
Warning
</a>
<a class="alert button clear">Alert
</a>
</div>
<strong>
Style entire group using <i>clear</i> class
</strong>
<div class="button-group clear">
<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:
Reference: https://get.foundation/sites/docs/button-group.html#hollow-and-clear
Share your thoughts in the comments
Please Login to comment...