Botones CSS - Guía rápida

Un botón en una página web es el actor principal donde un usuario hace clic después de seleccionar o ingresar las entradas requeridas y envía los detalles para obtener la información requerida. Este tutorial se centra en diez bibliotecas CSS principales para hacer que los botones sean increíbles, a saber:

  • bttn.css- La biblioteca bttn.css proporciona una enorme colección de estilos simples para botones. Esta biblioteca es completamente gratuita para uso personal y comercial. Estos botones se pueden personalizar fácilmente.

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

  • btns.css - La biblioteca de botones btns.css es un conjunto de botones CSS que hacen uso de transiciones suaves.

  • Social Buttons - La biblioteca Social Buttons es un conjunto de botones CSS hechos en CSS puro y se basan en Bootstrap y Font Awesome.

  • Beautons- 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.

La biblioteca bttn.css proporciona una enorme colección de estilos simples para botones. Esta biblioteca es completamente gratuita para uso personal y comercial. Estos botones se pueden personalizar fácilmente.

Cargando el bttn.css

Para cargar la biblioteca btns.css, vaya al enlace btns.css y pegue la siguiente línea en la sección <head> de la página web.

<head>
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>

Usando el botón

Cree un botón usando la etiqueta de botón html y agregue los estilos bttn-slant, bttn-royal con el especificador de tamaño bttn-lg.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-slant">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 = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg">Large</button>
      <button class = "bttn-pill bttn-md">Medium</button>
      <button class = "bttn-pill bttn-sm">Small</button>
      <button class = "bttn-pill bttn-xs">Extra 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 = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg bttn-primary">Primary</button>
      <button class = "bttn-pill bttn-md bttn-warning">Warning</button>
      <button class = "bttn-pill bttn-sm bttn-danger">Danger</button>
      <button class = "bttn-pill bttn-xs bttn-success">Success</button>
      <button class = "bttn-pill bttn-xs bttn-royal">Royal</button>
   </body>
</html>

Producirá la siguiente salida:

A continuación se muestran los diversos estilos disponibles en bttn.css

No Señor. Estilo Talla mediana Color primario Manifestación
1 bttn-slant bttn-md bttn-primario
2 bttn-unite bttn-md bttn-primario
3 píldora bttn bttn-md bttn-primario
4 bttn-float bttn-md bttn-primario
5 bttn-material-plano bttn-md bttn-primario
6 bttn-material-circle bttn-md bttn-primario
7 bttn-fill-circle bttn-md bttn-primario
8 gradiente bttn bttn-md bttn-primario
9 bttn-jelly bttn-md bttn-primario
10 bttn-stretch bttn-md bttn-primario
11 bttn-minimal bttn-md bttn-primario
12 bordeado por bttn bttn-md bttn-primario
13 bttn-simple bttn-md bttn-primario

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:

La biblioteca de botones btns.css es un conjunto de botones CSS que hacen uso de transiciones suaves.

Cargando el bttn.css

Para cargar la biblioteca btns.css, vaya al enlace btns.css y pegue la siguiente línea en la sección <head> de la página web.

<head>
   <link rel = "stylesheet" href = "btns.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/btns.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/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-blue">Large</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/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-red">Red</button>   
      <button class = "btn btn-lg btn-blue">Blue</button>
      <button class = "btn btn-lg btn-green">Green</button>
      <button class = "btn btn-lg btn-sea">Sea</button>   
      <button class = "btn btn-lg btn-yellow">Yellow</button>
      <button class = "btn btn-lg btn-orange">Orange</button>  
      <button class = "btn btn-lg btn-purple">Purple</button>   
      <button class = "btn btn-lg btn-black">Black</button>
      <button class = "btn btn-lg btn-cloud">Cloud</button>
      <button class = "btn btn-lg btn-grey">Grey</button>
   </body>
</html>

Producirá la siguiente salida:

Definiendo el estilo

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

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-blue">Regular</button>   
      <button class = "btn btn-lg btn-blue btn-round">Round</button>
      <button class = "btn btn-lg btn-blue btn-raised">Raised</button>
      <button class = "btn btn-blue btn-sm">Small</button>   
      <button class = "btn btn-lg btn-outline-blue ">Outlined</button>
   </body>
</html>

Producirá la siguiente salida:

La biblioteca Social Buttons es un conjunto de botones CSS hechos en CSS puro y se basan en Bootstrap y Font Awesome.

Cargando los botones sociales

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

<head>
   <link rel = "stylesheet" href = "bootstrap-social.css">
</head>

Usando el botón

Cree un botón usando la etiqueta de anclaje html y agregue estilos btn, btn-block con el especificador social btn-social.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </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 = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-lg btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-md btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-sm btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-xs btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

Producirá la siguiente salida:

Usar solo los iconos

El siguiente ejemplo muestra cómo elegir botones de solo icono.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-social-icon btn-twitter">
         <span class = "fa fa-twitter"></span>
      </a>   
   </body> 
</html>

Producirá la siguiente salida:

A continuación se muestran los distintos estilos disponibles en Social Buttons.

No Señor. Estilo Talla mediana Botón Botón de icono
1 btn-twitter btn-md Iniciar sesión con Twitter
2 btn-bitbucket btn-md Iniciar sesión con Bitbucket
3 btn-dropbox btn-md Iniciar sesión con Dropbox
4 btn-facebook btn-md Iniciar sesión con Facebook
5 btn-btn-flickr btn-md Iniciar sesión con Flickr
6 btn-btn-foursquare btn-md Iniciar sesión con Foursquare
7 btn-btn-github btn-md Iniciar sesión con Github
8 btn-btn-google btn-md Iniciar sesión con Google
9 btn-btn-instagram btn-md Iniciar sesión con Instagram
10 btn-btn-linkedin btn-md Ingresar con LinkedIn
11 btn-btn-microsoft btn-md Iniciar sesión con Microsoft
12 btn-btn-odnoklassniki btn-md Iniciar sesión con Odnoklassniki
13 btn-btn-openid btn-md Iniciar sesión con Openid
14 btn-btn-pinterest btn-md Iniciar sesión con Pinterest
15 btn-btn-reddit btn-md Iniciar sesión con Reddit
dieciséis btn-btn-soundcloud btn-md Iniciar sesión con Soundcloud
17 btn-btn-tumblr btn-md Iniciar sesión con Tumblr
18 btn-btn-twitter btn-md Iniciar sesión con Twitter
19 btn-btn-vimeo btn-md Iniciar sesión con Vimeo
20 btn-btn-vk btn-md Iniciar sesión con Vk
21 btn-btn-yahoo btn-md Iniciar sesión con Yahoo

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 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.