Botões CSS - uso de 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.
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 -