Nesta seção você aprenderá a utilizar os botões e suas classes em seu projeto
Para utilizar botões em seu projeto é bem simples, basta adicionar a classe btn nos elementos <button> ou <a>. Como padrão a cor do botão é cinza, para aplicar uma cor de fundo, basta adicionar o nome da cor como classe do elemento. Veja exemplos abaixo:
<button class="btn">Padrão</button>
<button class="btn red">red</button>
<button class="btn blue">blue</button>
<button class="btn green">green</button>
<button class="btn orange-darken">orange-darken</button>
Existe outras classes que podem ser usadas em conjunto com a btn, Como por exemplo a classe com prefixo line-* que deixa o botão somente com uma determinada cor na borda. Essa classe deve ser combinada com uma cor que não possui no nome as palavras -light ou -darken como por exemplo: line-red.
<button class="btn line-grey">line-grey</button>
<button class="btn line-red">line-red</button>
<button class="btn line-blue">line-blue</button>
Outra classe que veremos agora é a classe com prefix gradient-*, assim como citado na classe anteriormente, essa classe deve ser combinada com as cores que não possui as palavras -light ou -darken no nome da cor.
<button class="btn gradient-green">gradient-green</button>
<button class="btn gradient-red">gradient-red</button>
<button class="btn gradient-blue">gradient-blue</button>
Existem classes que podem ser usadas para manipular o tamanho dos botões,
são elas:
btn-sm: essa classe diminui o tamanho do botão padrão.
btn-lg: essa classe aumenta o tamanho do botão padrão.
btn-block essa classe faz com que o botão ocupa 100% da coluna disponibilizada.
<button class="btn red btn-sm">btn-sm</button>
<button class="btn red btn-lg">btn-lg</button>
<button class="btn red btn-block">btn-block</button>