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/foundation-sites@6.7.4/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/foundation-sites@6.7.4/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>