Botões CSS - Uso de botões pushy

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 -

↰ Previous page Next page ↱