Botones CSS: uso de bellezas

La biblioteca de botones de Beautons es un sencillo juego de herramientas CSS para crear botones. Permite aplicar una combinación de estilos y tamaños para crear un gran conjunto de botones consistentes, robustos y sólidos.

Cargando las bellezas

Para cargar la biblioteca de Beautons, 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 = "beauton.min.css">
</head>

Usando el botón

Cree un botón usando la etiqueta de botón html y agregue estilos btn.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn"<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/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--small">Small</button> <br/> <br/> 
      <button class = "btn btn--large btn-blue">Large</button><br/><br/>
      <button class = "btn btn--huge">Huge</button><br/><br/>
      <button class = "btn btn--full">Full</button><br/><br/>
   </body>
</html>

Producirá la siguiente salida:

Definición del tamaño de fuente

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/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--alpha">Huge</button><br/><br/>
      <button class = "btn btn--beta">Large</button><br/><br/>
      <button class = "btn btn--gamma">Regular</button><br/><br/>
   </body>
</html>

Producirá la siguiente salida:

Definición de los botones funcionales

El siguiente ejemplo muestra varios botones funcionales.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--positive">Positive</button> <br/>  <br/>
      <button class = "btn btn--negative">Negative</button><br/><br/>
      <button class = "btn btn--inactive">Disabled</button><br/><br/>
      <button class = "btn btn--soft">Rounded</button><br/><br/>
      <button class = "btn btn--hard">Hard</button><br/><br/>
   </body>
</html>

Producirá la siguiente salida:

Combinando los estilos

El siguiente ejemplo muestra cómo combinar los estilos de los botones.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--large btn--positive">Button</button>   <br/><br/>
      <button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/>
      <button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/>
      <p>A <button class = "btn  btn--natural">button</button> in a paragraph.</p><br/><br/>
   </body>
</html>

Producirá la siguiente salida:

UN en un párrafo.

Next page ↱