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>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
crossorigin="anonymous">
<!-- Compressed JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"
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>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
crossorigin="anonymous">
<!-- Compressed JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"
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
Similar Reads
Foundation CSS Dropdown Basics Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework
2 min read
Foundation CSS Dropdown Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework
4 min read
Foundation CSS Button Basics 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
2 min read
Foundation CSS Button Foundation CSS is an open-source and 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, M
6 min read
Foundation CSS Dropdown Menu 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,
3 min read