Botões CSS - Guia rápido

Um botão em uma página da web é o ator principal onde um usuário clica após selecionar ou inserir as entradas necessárias e envia os detalhes para obter as informações necessárias. Este tutorial se concentra em dez bibliotecas CSS principais para tornar os botões incríveis, a saber -

bttn.css- A biblioteca bttn.css fornece uma enorme coleção de estilos simples para botões. Esta biblioteca é totalmente gratuita para uso pessoal e comercial. Esses botões podem ser personalizados facilmente.
Pushy Buttons - A biblioteca Pushy Buttons é uma pequena biblioteca CSS Pressable Buttons.
btns.css - A biblioteca de botões btns.css é um conjunto de botões CSS que faz uso de transições suaves.
Social Buttons - A biblioteca de Botões Sociais é um conjunto de Botões CSS feitos em CSS puro e são baseados em Bootstrap e Font Awesome.
Beautons- A biblioteca de botões do Beautons é um kit de ferramentas CSS simples para a criação de botões. Permite aplicar uma combinação de estilos, tamanhos para criar um enorme conjunto de botões consistentes, robustos e sólidos.

A biblioteca bttn.css fornece uma enorme coleção de estilos simples para botões. Esta biblioteca é totalmente gratuita para uso pessoal e comercial. Esses botões podem ser personalizados facilmente.

Carregando o bttn.css

Para carregar a biblioteca btns.css, acesse o link btns.css e cole a seguinte linha na seção <head> da página da web.

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

Usando o botão

Crie um botão usando a tag de botão html e adicione estilos bttn-slant, bttn-royal com o especificador de tamanho 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>

Ele produzirá a seguinte saída -

Definindo o tamanho

Você pode aumentar ou diminuir o tamanho de um botão definindo seu tamanho usando CSS e usando-o junto com o nome da classe, conforme mostrado abaixo. No exemplo dado, temos mudanças de quatro tamanhos.

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

Ele produzirá a seguinte saída -

Definindo a cor

Assim como o tamanho, você pode definir a cor do botão usando CSS. O exemplo a seguir mostra como alterar a cor do botão.

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

Ele produzirá a seguinte saída -

A seguir estão os vários estilos disponíveis em bttn.css

Sr. Não.	Estilo	Tamanho médio	Cor primária
1	bttn-slant	bttn-md	bttn-primário
2	bttn-unite	bttn-md	bttn-primário
3	pílula bttn	bttn-md	bttn-primário
4	bttn-float	bttn-md	bttn-primário
5	bttn-material-flat	bttn-md	bttn-primário
6	bttn-material-circle	bttn-md	bttn-primário
7	bttn-fill-circle	bttn-md	bttn-primário
8	gradiente bttn	bttn-md	bttn-primário
9	bttn-geléia	bttn-md	bttn-primário
10	bttn-stretch	bttn-md	bttn-primário
11	bttn-minimal	bttn-md	bttn-primário
12	com bordas bttn	bttn-md	bttn-primário
13	bttn-simples	bttn-md	bttn-primário

A biblioteca Pushy Buttons é uma pequena biblioteca CSS Pressable Buttons.

Carregando o bttn.css

Para carregar a biblioteca pushy-buttons.min.css, baixe o css do github e cole a seguinte linha na seção <head> da página da web.

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

Usando o botão

Crie um botão usando a tag de botão html e adicione os estilos btn, btn-blue com o especificador de tamanho 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>

Ele produzirá a seguinte saída -

Definindo o tamanho

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

Ele produzirá a seguinte saída -

Definindo a cor

Assim como o tamanho, você pode definir a cor do botão usando CSS. O exemplo a seguir mostra como alterar a cor do botão.

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

Ele produzirá a seguinte saída -

A biblioteca de botões btns.css é um conjunto de botões CSS que faz uso de transições suaves.

Carregando o bttn.css

Para carregar a biblioteca btns.css, acesse o link btns.css e cole a seguinte linha na seção <head> da página da web.

<head>
   <link rel = "stylesheet" href = "btns.css">
</head>

Usando o botão

Crie um botão usando a tag de botão html e adicione os estilos btn, btn-blue com o especificador de tamanho btn-lg.

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

Ele produzirá a seguinte saída -

Definindo o tamanho

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

Ele produzirá a seguinte saída -

Definindo a cor

Assim como o tamanho, você pode definir a cor do botão usando CSS. O exemplo a seguir mostra como alterar a cor do botão.

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

Ele produzirá a seguinte saída -

Definindo o estilo

Assim como o tamanho e a cor, você pode definir o estilo do botão usando CSS. O exemplo a seguir mostra como alterar o estilo do botão.

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

Ele produzirá a seguinte saída -

A biblioteca de Botões Sociais é um conjunto de Botões CSS feitos em CSS puro e são baseados em Bootstrap e Font Awesome.

Carregando os botões sociais

Para carregar a biblioteca bootstrap-social.css, baixe o bootstrap-social.css do github e cole a seguinte linha na seção <head> da página da web.

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

Usando o botão

Crie um botão usando a tag âncora html e adicione os estilos btn, btn-block com o 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>

Ele produzirá a seguinte saída -

Entrar com o Twitter

Definindo o tamanho

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

Ele produzirá a seguinte saída -

Entrar com o Twitter Entrar com o Twitter Entrar com o Twitter Entrar com o Twitter

Usando apenas os ícones

O exemplo a seguir mostra como escolher botões apenas de ícone.

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

Ele produzirá a seguinte saída -

A seguir estão os vários estilos disponíveis nos Botões Sociais.

Sr. Não.	Estilo	Tamanho médio	Botão
1	btn-twitter	btn-md	Entrar com o Twitter
2	btn-bitbucket	btn-md	Entrar com Bitbucket
3	btn-dropbox	btn-md	Entrar com Dropbox
4	btn-facebook	btn-md	Entrar com o Facebook
5	btn-btn-flickr	btn-md	Entrar com Flickr
6	btn-btn-foursquare	btn-md	Entrar com o Foursquare
7	btn-btn-github	btn-md	Entrar com Github
8	btn-btn-google	btn-md	Entrar com o Google
9	btn-btn-instagram	btn-md	Entrar com Instagram
10	btn-btn-linkedin	btn-md	Entrar com Linkedin
11	btn-btn-microsoft	btn-md	Entrar com a Microsoft
12	btn-btn-odnoklassniki	btn-md	Entrar com Odnoklassniki
13	btn-btn-openid	btn-md	Entrar com Openid
14	btn-btn-pinterest	btn-md	Entrar com Pinterest
15	btn-btn-reddit	btn-md	Entrar com Reddit
16	btn-btn-soundcloud	btn-md	Faça login com o Soundcloud
17	btn-btn-tumblr	btn-md	Entrar com Tumblr
18	btn-btn-twitter	btn-md	Entrar com o Twitter
19	btn-btn-vimeo	btn-md	Entrar com Vimeo
20	btn-btn-vk	btn-md	Entrar com Vk
21	btn-btn-yahoo	btn-md	Entrar com o Yahoo

A biblioteca de botões do Beautons é um kit de ferramentas CSS simples para a criação de botões. Permite aplicar uma combinação de estilos, tamanhos para criar um enorme conjunto de botões consistentes, robustos e sólidos.

Loading the Beautons

To load the Beautons library, download the css from github and paste the following line in the <head> section of the webpage.

<head>
   <link rel = "stylesheet" href = "beauton.min.css">
</head>

Using the Button

Create a button using html button tag and add styles btn.

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

It will produce the following output −

Defining the Size

You can increase or decrease the size of an button by defining its size using CSS and using it along with the class name, as shown below. In the given example, we have changes four sizes.

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

It will produce the following output −

Defining the Font Size

You can increase or decrease the size of an button by defining its size using CSS and using it along with the class name, as shown below. In the given example, we have changes four sizes.

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

It will produce the following output −

Defining the Functional Buttons

The following example shows various functional button.

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

It will produce the following output −

Combining the Styles

The following example shows how to combines the styles of the buttons.

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

It will produce the following output −

A in a paragraph.