Foundation CSS Button Basics
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. When we want to perform some action and want to navigate to a different page then we can use the button. We can create the button using <a> tag and <button> tag. <a> tag is used when we want to do navigation and <button> tag is used when we want to perform some action that can change something on the page. If we use the <button> tag then add attribute type=" button" and if we want to submit a form then remove this attribute and add submit class.
In this article, we will discuss the basics of buttons in Foundation CSS.
Foundation CSS button basics Class:
- button: It is used to create the button to perform some action.
Syntax:
<button class="button">
....
</button>
Example 1: The following code demonstrates button basics using a <a> tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
crossorigin="anonymous">
</head>
<body>
<center>
<h1 style="color:green;"> GeeksforGeeks </h1>
<h3> Foundation CSS Button Basics </h3>
<a href="#" class="button">
GFG Button 1
</a>
<a href="#" class="button">
GFG Button 2
</a>
<a href="#" class="button">
GFG Button 3
</a>
<a href="#" class="button">
GFG Button 4
</a>
</center>
</body>
</html>
Output:
Foundation CSS Button Basics
Example 2: The following code demonstrates button basics using a <button> tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
crossorigin="anonymous">
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3> Foundation CSS Button Basics</h3>
<button class="button">
GFG Button 1
</button>
<button class="secondary button">
GFG Button 2
</button>
<button class="success button">
GFG Button 3
</button>
<button class="alert button">
GFG Button 4
</button>
</center>
</body>
</html>
Output:
Foundation CSS Button Basics
Reference link: https://get.foundation/sites/docs/button.html#basics
Similar Reads
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 Button Accessibility Foundation 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. The framework is b
3 min read
Foundation CSS Close Button 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
3 min read
Foundation CSS Button Group 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
5 min read
Foundation CSS Button Sizing 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,
4 min read