Open In App

Foundation CSS Button Sizing

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Buttons can be found everywhere on a webpage. They allow us to perform various operations with a simple click. Foundation CSS offers us a foundation-styled button. Sometimes, we may want to change the size and shape of the button. Foundation CSS allows us to change the button sizing by using various classes such as tiny, small, large, expanded.

Foundation CSS Button Sizing Classes:

  • tiny: Makes the size and shape of the button tiny
  • small: Makes the size and shape of the button small
  • large: Makes the size and shape of the button large
  • expanded: Expands the size and shape of the button

Syntax:

<a class="button button-sizing-class" href="link">Button</a>

Example 1: In the below example, we have created various sized buttons utilizing all the button sizing classes.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
  <title>Foundation CSS Button Sizing</title>
  <link rel="stylesheet"
        href=
        crossorigin="anonymous"/>
  <script src=
          crossorigin="anonymous">
  </script>
  <link rel="stylesheet"
        href=
  <script src=
  </script>
</head>
  
  <body
    class="grid-x align-middle align-center grid-container"
    style="height: 95vh; width: 95vw">
    <div>
      <h2 style="color: green">GeekforGeeks</h2>
      <h4>Foundation CSS Button Sizing</h4>
      <a class="button tiny" href="#">
        Tiny Button
      </a>
      <a class="button small" href="#">
        Small Button
      </a>
      <a class="button" href="#"
         >Default Button
      </a>
      <a class="button large" href="#">
        Large Button
      </a>
      <a class="button expanded" href="#">
        Expanded Button
      </a>
      <a class="button small expanded" href="#">
        Small Expanded Button
      </a>
    </div>
    <script>
      $(document).ready(function () {
        $(document).foundation();
      });
    </script>
  </body>
</html>


Output:

Foundation CSS Button Sizing

Foundation CSS Button Sizing

Foundation CSS also gives us the option to create buttons that expand responsively. By adding the Foundation CSS stylesheet mentioned here, to our document, we have access to the responsive expanded classes.

Foundation CSS Responsive Expanded classes: 

  • small-only-expanded: Expands the size and shape of the button only on smaller-sized screens.
  • medium-only-expanded: Expands the size and shape of the button only on medium-sized screens.
  • large-only-expanded: Expands the size and shape of the button only on large-sized screens.
  • medium-expanded: Expands the size and shape of the button on medium and large-sized screens.
  • large-expanded: Expands the size and shape of the button on larger-sized screens.
  • medium-down-expanded: Expands the size and shape of the button on medium and small-sized screens.
  • large-down-expanded: Expands the size and shape of the button on large and small-sized screens.

Syntax:

<a class="button responsive-expanded-button-class" href="link">Button</a>

Example 2: In the below example, we have created various responsive expanded buttons.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
  <title>Foundation CSS Button Sizing</title>
  <link rel="stylesheet"
        href=
        crossorigin="anonymous"/>
  <script src=
          crossorigin="anonymous">
  </script>
  <link rel="stylesheet"
        href=
  <script src=
  </script>
  <style>
    @media screen and (max-width: 39.9375em) {
      .button.small-only-expanded {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
      }
    }
    @media screen and (min-width: 40em) and (max-width: 63.9375em) {
      .button.medium-only-expanded {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
      }
    }
    @media screen and (max-width: 63.9375em) {
      .button.medium-down-expanded {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
      }
    }
    @media print, screen and (min-width: 40em) {
      .button.medium-expanded {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
      }
    }
    @media screen and (min-width: 64em) and (max-width: 74.9375em) {
      .button.large-only-expanded {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
      }
    }
    @media screen and (max-width: 74.9375em) {
      .button.large-down-expanded {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
      }
    }
    @media print, screen and (min-width: 64em) {
      .button.large-expanded {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
      }
    }
  </style>
</head>
  
  <body class="grid-x align-middle 
               align-center grid-container"
        style="height: 95vh; width: 95vw" >
    <div>
      <h2 style="color: green">GeekforGeeks</h2>
      <h4>Foundation CSS Button Sizing</h4>
      <a class="button small-only-expanded"
         href="#">
        Expands only on small screens
      </a>
      <a class="button medium-only-expanded"
         href="#">
        Expands only on medium screens
      </a>
      <a class="button large-only-expanded"
         href="#">
        Expands only on large screens
      </a>
      <a class="button medium-expanded"
         href="#">
        Expands on medium and larger screens
      </a>
      <a class="button large-expanded"
         href="#">
        Expands on large and larger screens
      </a>
      <a class="button medium-down-expanded"
         href="#">
        Expands on medium and smaller screens
      </a>
      <a class="button large-down-expanded"
         href="#">
        Expands on large and smaller screens
      </a>
    </div>
    <script>
      $(document).ready(function () {
        $(document).foundation();
      });
    </script>
  </body>
</html>


Output:

Foundation CSS Button Sizing

Foundation CSS Button Sizing

Reference: https://get.foundation/sites/docs/button.html#sizing



Last Updated : 10 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads