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 -