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 Button Clear Style is used to create a simple button of anchor type. The clear style removes the button property and makes a simple anchor type clickable element.
Used Classes:
- clear: This class is used to create a clear style button element.
Syntax:
- With anchor tag:
<a class="clear button" href="#">
Clear Button
</a>- With button tag:
<button type="button"
class="clear button">
Clear Button
</button>Example 1: In this example, we will create a button using <a> tag and use the .button class to make anchor element to button style. Also, use .clear class to make clear button styles.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Button Clear Style</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- Compressed JavaScript -->
<script src=
crossorigin="anonymous"></script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Button Clear Style</h3>
<a class="button clear primary" href="#">
Clear Primary Button
</a>
<a class="button clear secondary" href="#">
Clear Secondary Button
</a>
<a class="button clear success" href="#">
Clear Success Button
</a>
<br>
<a class="button clear alert" href="#">
Clear Alert Button
</a>
<a class="button clear warning" href="#">
Clear Warning Button
</a>
<a class="button clear disabled" href="#" aria-disabled>
Clear Disabled Button
</a>
</center>
</body>
</html>
|
Output:
Example 2: In this example, we will create a button using the <button> tag and use the .button class. Also, use .clear class to make clear button styles.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Button Clear Style</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- Compressed JavaScript -->
<script src=
crossorigin="anonymous"></script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Button Clear Style</h3>
<button type="button" class="clear button primary">
Clear Primary Button
</button>
<button type="button" class="clear button secondary">
Clear Secondary Button
</button>
<button type="button" class="clear button success">
Clear Success Button
</button>
<br>
<button type="button" class="clear button alert">
Clear Alert Button
</button>
<button type="button" class="clear button warning">
Clear Warning Button
</button>
<button type="button" class="clear button disabled">
Clear Disabled Button
</button>
</center>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/button.html#clear-style