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

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 = "/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

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 = "/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

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/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 Botão de ícone
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.