Foundation CSS Button Dropdown Arrows
Last Updated :
16 Feb, 2022
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 Dropdown Arrows is a button style that contains dropdown arrow. The dropdown arrow type button is created using .dropdown class.
Used Class:
- dropdown: This class is used to create a dropdown arrow button.
Syntax:
<a class="dropdown button" href="#">
Dropdown Button
</a>
or
<button type="button"
class="dropdown button">
Dropdown Button
</button>
Example 1: In this example, we will create a button using <a> tag and and use .button class to make anchor element to button style. Also, use .dropdown class to make the button in dropdown button styles.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Button Dropdown Arrows</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous"></script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Button Dropdown Arrows</h3>
<a class="dropdown button primary" href="#">
Dropdown Primary Button Arrow
</a>
<a class="dropdown button secondary" href="#">
Dropdown Secondary Button Arrow
</a>
<a class="dropdown button success" href="#">
Dropdown Success Button Arrow
</a>
<br>
<a class="dropdown button alert" href="#">
Dropdown Alert Button Arrow
</a>
<a class="dropdown button warning" href="#">
Dropdown Warning Button Arrow
</a>
<a class="dropdown button disabled" href="#"
aria-disabled>
Dropdown Disabled Button Arrow
</a>
<br>
<a class="dropdown button success tiny" href="#">
Dropdown Tiny Success Button Arrow
</a>
<a class="dropdown button alert small" href="#">
Dropdown Small Alert Button Arrow
</a>
<a class="dropdown button warning large" href="#">
Dropdown Large Warning Button Arrow
</a>
<a class="dropdown button expanded" href="#">
Dropdown Expended Button Arrow
</a>
</center>
</body>
</html>
|
Output:
Example 2: In this example, we will create a button using <button> tag and and use .button class. Also, use .dropdown class to make dropdown button styles.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Button Dropdown Arrows</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous"></script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Button Dropdown Arrows</h3>
<button type="button" class="dropdown button primary">
Dropdown Primary Button Arrow
</button>
<button type="button" class="dropdown button secondary">
Dropdown Secondary Button Arrow
</button>
<button type="button" class="dropdown button success">
Dropdown Success Button Arrow
</button>
<br>
<button type="button" class="dropdown button alert">
Dropdown Alert Button Arrow
</button>
<button type="button" class="dropdown button warning">
Dropdown Warning Button Arrow
</button>
<button type="button" class="dropdown button disabled">
Dropdown Disabled Button Arrow
</button>
<br>
<button type="button" class="dropdown button success tiny">
Dropdown Tiny Success Button Arrow
</button>
<button type="button" class="dropdown button alert small">
Dropdown Small Alert Button Arrow
</button>
<button type="button" class="dropdown button warning large">
Dropdown Large Warning Button Arrow
</button>
<button type="button" class="dropdown button expanded">
Dropdown Expended Button Arrow
</button>
</center>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/button.html#dropdown-arrows
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...