Foundation - Button Sizing

Description

Size and shape of the buttons can be changed by using additional classes such as tiny, small, large, expanded and small expanded.

Example

The following example demonstrates how to change the size of the buttons in Foundation.

Live Demo

<html>
   <head>
      <title>Button Sizing</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">
   </head>

   <body>
      <a class = "tiny button" href = "#">Tiny button</a>
      <a class = "small button" href = "#">Small button</a>
      <a class = "button" href = "#">Button</a>
      <a class = "large button" href = "#">Large button</a>
      <a class = "expanded button" href = "#">Expanded button</a>
      <a class = "small expanded button" href = "#">Small expanded button</a>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code button_sizing.html file.
Open this HTML file in a browser, an output is displayed as shown below.

foundation_basic_controls.htm