Botões CSS - Uso de 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.
Carregando os Beautons
Para carregar a biblioteca do Beautons, baixe o css do github e cole a seguinte linha na seção <head> da página da web.
<head>
<link rel = "stylesheet" href = "beauton.min.css">
</head>Usando o botão
Crie um botão usando a tag de botão html e adicione estilos btn.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn"<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/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>Ele produzirá a seguinte saída -
Definindo o tamanho da fonte
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/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>Ele produzirá a seguinte saída -
Definindo os botões funcionais
O exemplo a seguir mostra vários botões funcionais.
<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>Ele produzirá a seguinte saída -
Combinando os Estilos
O exemplo a seguir mostra como combinar os estilos dos botões.
<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>Ele produzirá a seguinte saída -
UMA em um parágrafo.