Botones CSS puros

Posted on by Rudeus Greyrat

Los botones son uno de los elementos de interfaz de usuario más comunes. Hicieron posible que los usuarios interactúen con un sistema y tomen medidas al hacer selecciones. Podemos crear diferentes tipos de botones con la ayuda de Pure CSS.

Clases de botones CSS puros:

  • Botones predeterminados
  • Botones deshabilitados
  • Botones principales
  • Botones activos
  • Personalización de botones

Botones predeterminados: agregue el nombre de clase «pure-button» a cualquier elemento <a> o <button> para crear un botón predeterminado.

Sintaxis:

// Link Button
<a class="pure-button" href="#">
  Pure Button1
</a>

// Normal Button
<button class="pure-button">
  Pure Button2
</button>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
          href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
          integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
          crossorigin="anonymous"/>
</head>
  
<body style="text-align: center">
    <!--Default buttons-->
    <strong>Pure CSS Default Buttons</strong>
    <br><br>
    <!-- Link Button -->
    <a class="pure-button" href="#">Pure Button1</a>
  
    <!-- Normal Button -->
    <button class="pure-button">Pure Button2</button>
</body>
</html>    

Producción:

Botones deshabilitados: para marcar un botón como deshabilitado, agregue «pure-button-disabled» con class pure-button. También puede usar el atributo deshabilitado directamente.

Sintaxis:

<button class="pure-button pure-button-disabled">
  Disabled Button1
</button>  

<button class="pure-button" disabled> 
  Disabled Button2
</button>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
          href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
          integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
          crossorigin="anonymous"/>
</head>
  
<body style="text-align: center">
    <!--Default buttons-->
    <strong>Pure CSS Disabled Buttons</strong>
    <br><br>
    <!-- Link Button -->
    <a class="pure-button pure-button-disabled" href="#">
        Button Disabled
    </a>
  
    <!-- Normal Button -->
    <button class="pure-button" disabled="">
        Button Disabled 
    </button>
</body>
</html>

Producción:

Botones activos: para crear un botón para que aparezca «pulsado», puede agregar la clase «pure-button-active» junto con pure-button a cualquier elemento <a> o <button> .

Sintaxis:

<a class="pure-button pure-button-active" href="#">
  Active Button1
</a>  

<button class="pure-button pure-button-active">
  Active Button2
</button>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
        href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
        integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
        crossorigin="anonymous"/>
</head>
  
<body style="text-align: center">
    <!--Default buttons-->
    <strong>Pure CSS Active Buttons</strong>
    <br><br>
    <!-- Link Button -->
    <a class="pure-button pure-button-active" href="#">
        Active Button1
    </a>
  
    <!-- Normal Button -->
    <button class="pure-button pure-button-active">
        Active Button2
    </button>
</body>
</html>

Producción:

Botones principales: para indicar que un botón representa una acción principal, agregue la clase «pure-button-primary» junto con pure-button.

Sintaxis:

<a class="pure-button pure-button-primary" href="#">
  Primary Button1
</a> 
 
<button class="pure-button pure-button-primary">
  Primary Button2
</button>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
        href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
        integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
        crossorigin="anonymous"/>
</head>
  
<body style="text-align: center">
    <!--Default buttons-->
    <strong>Pure CSS Primary Buttons</strong>
    <br><br>
    <!-- Link Button -->
    <a class="pure-button pure-button-primary" href="#">
        Primary Button1
    </a>
  
    <!-- Normal Button -->
    <button class="pure-button pure-button-primary">
        Primary Button2
    </button>
</body>
</html>

Producción:

Botones personalizados: con la ayuda de Pure CSS, es fácil personalizar los botones para su propia aplicación debido a su estilo minimalista. Agrupe su CSS personalizado en una clase como button-success, que luego puede agregar a un elemento que ya tiene una clase de botón puro.

Nota: Aquí podemos personalizar nuestros botones de acuerdo a nuestra necesidad, usando CSS manual.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
    <!--Import Pure Css files-->
  <link rel="stylesheet"
      href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
      integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
      crossorigin="anonymous"/>
  <style>
      /* Styling for Customized Buttons */
  
      .button-success,
      .button-error,
      .button-warning,
      .button-secondary {
        color: white;
        border-radius: 15px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
      }
  
      .button-success {
        background: rgb(28, 184, 65);
      }
  
      .button-error {
        background: rgb(202, 60, 60);
      }
  
      .button-warning {
        background: rgb(223, 117, 20);
      }
  
      .button-secondary {
        background: rgb(66, 184, 221);
      }
    </style>
</head>
  
<body style="text-align: center">
    <!--Customized buttons-->
    <strong>Pure CSS Customized Buttons </strong>
    <br /><br />
    <button class="button-success pure-button">
        Success Button
    </button>
  
    <button class="button-secondary pure-button">
        Secondary Button
    </button>
  
    <button class="button-warning pure-button">
        Warning Button
    </button>
  
    <button class="button-error pure-button">
        Error Button
    </button>
  </body>
</html>

Producción:

Botones con diferentes tamaños: Aquí podemos configurar el tamaño del botón de acuerdo a nuestra necesidad.

  • Botón extra pequeño: agregue la clase «botón-xpequeño» junto con el botón puro.
  • Botón pequeño: agregue la clase «botón-pequeño» junto con el botón puro.
  • Botón normal: agregue solo la clase de «botón puro» .
  • Botón grande: agregue la clase «botón grande» junto con el botón puro.
  • Botón extra grande: agregue la clase «botón-xgrande» junto con el botón puro.

Nota: Aquí podemos cambiar el tamaño de nuestros botones según nuestras necesidades, usando CSS manual.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
    <!--Import Pure Css files-->
  <link rel="stylesheet"
      href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
      integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
      crossorigin="anonymous"/>
  <style>
        /* Styling for font-size in buttons */
          
        .button-xsmall {
            font-size: 70%;
        }
          
        .button-small {
            font-size: 85%;
        }
          
        .button-large {
            font-size: 110%;
        }
          
        .button-xlarge {
            font-size: 125%;
        }
    </style>
</head>
  
<body style="text-align: center">
    <!--Customized buttons-->
    <strong>
        Pure CSS Buttons with different Sizes
    </strong>
    <br /><br />
    <button class="button-small pure-button">
        Small Button
    </button>
  
    <button class="pure-button">
        Normal Button
    </button>
  
    <button class="button-large pure-button">
        large Button
    </button>
  
    <button class="button-xlarge pure-button">
        xlarge Button
    </button>
  </body>
</html>

Producción:

Referencia: https://purecss.io/buttons/

Publicación traducida automáticamente

Artículo escrito por ankushingle8523 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 *