Tamaño del botón CSS básico

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a SaaS. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.

Los botones se pueden encontrar en todas partes en una página web. Nos permiten realizar diversas operaciones con un simple clic. Foundation CSS nos ofrece un botón con estilo de fundación. A veces, podemos querer cambiar el tamaño y la forma del botón. Foundation CSS nos permite cambiar el tamaño de los botones usando varias clases, como diminuto, pequeño, grande, expandido.

Clases de tamaño de botón de Foundation CSS:

  • tiny: hace que el tamaño y la forma del botón sean minúsculos
  • pequeño: hace que el tamaño y la forma del botón sean pequeños
  • grande: hace que el tamaño y la forma del botón sean grandes
  • expandido: expande el tamaño y la forma del botón

Sintaxis:

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

Ejemplo 1: En el siguiente ejemplo, hemos creado botones de varios tamaños utilizando todas las clases de tamaño de botón.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Foundation CSS Button Sizing</title>
  <link rel="stylesheet"
        href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous"/>
  <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
          crossorigin="anonymous">
  </script>
  <link rel="stylesheet"
        href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
  </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>

Producción:

Foundation CSS Button Sizing

Tamaño del botón CSS básico

Foundation CSS también nos da la opción de crear botones que se expanden de manera receptiva . Al agregar la hoja de estilo Foundation CSS mencionada aquí , a nuestro documento, tenemos acceso a las clases expandidas receptivas.

Foundation CSS Responsive Clases expandidas: 

  • small-only-expanded: expande el tamaño y la forma del botón solo en pantallas más pequeñas.
  • medio solo expandido: expande el tamaño y la forma del botón solo en pantallas medianas.
  • large-only-expanded: expande el tamaño y la forma del botón solo en pantallas de gran tamaño.
  • medio expandido: expande el tamaño y la forma del botón en pantallas medianas y grandes.
  • large-expanded: amplía el tamaño y la forma del botón en pantallas de mayor tamaño.
  • medio-abajo-expandido: amplía el tamaño y la forma del botón en pantallas medianas y pequeñas.
  • large-down-expanded: amplía el tamaño y la forma del botón en pantallas grandes y pequeñas.

Sintaxis:

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

Ejemplo 2: En el siguiente ejemplo, hemos creado varios botones expandidos receptivos.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Foundation CSS Button Sizing</title>
  <link rel="stylesheet"
        href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous"/>
  <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
          crossorigin="anonymous">
  </script>
  <link rel="stylesheet"
        href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
  </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>

Producción:

Foundation CSS Button Sizing

Tamaño del botón CSS básico

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

Publicación traducida automáticamente

Artículo escrito por tejsidda34 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *