Botones CSS: uso de botones pulsadores

La biblioteca Pushy Buttons es una pequeña biblioteca CSS Pressable Buttons.

Cargando el bttn.css

Para cargar la biblioteca pushy - buttons.min.css , descargue el css de github y pegue la siguiente línea en la sección <head> de la página web.

<head>
   <link rel = "stylesheet" href = "pushy-buttons.min.css">
</head>

Usando el botón

Cree un botón usando la etiqueta de botón html y agregue estilos btn, btn-blue con el especificador de tamaño btn-lg.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--blue">Submit</button>
   </body>
</html>

Producirá la siguiente salida:

Definiendo el tamaño

Puede aumentar o disminuir el tamaño de un botón definiendo su tamaño usando CSS y usándolo junto con el nombre de la clase, como se muestra a continuación. En el ejemplo dado, tenemos cambios de cuatro tamaños.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--lg btn--blue">Large</button>
      <button class = "btn btn--df btn--blue">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
      <button class = "btn btn--sm btn--blue">Small</button>
   </body>
</html>

Producirá la siguiente salida:

Definiendo el color

Al igual que el tamaño, puede definir el color del botón mediante CSS. El siguiente ejemplo muestra cómo cambiar el color del botón.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--lg btn--red">Large</button>
      <button class = "btn btn--df btn--green">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
   </body>
</html>

Producirá la siguiente salida:

↰ Previous page Next page ↱