Buttons | DS CANTA.

Variantes Solidas

<button class="canta-btn canta-btn--primary">Primary</button>
<button class="canta-btn canta-btn--secondary">Secondary</button>
<button class="canta-btn canta-btn--success">Success</button>
<button class="canta-btn canta-btn--danger">Danger</button>
<button class="canta-btn canta-btn--warning">Warning</button>
<button class="canta-btn canta-btn--info">Info</button>
<button class="canta-btn canta-btn--amber">Amber</button>
<button class="canta-btn canta-btn--magenta">Magenta</button>

Outline, Ghost e Link

Variantes Brutais (opt-in)

Para landing pages, marketing e elementos de destaque. Nao recomendado para interfaces de sistema.

Tamanhos

<button class="canta-btn canta-btn--primary canta-btn--sm">Small</button>
<button class="canta-btn canta-btn--primary">Medium</button>
<button class="canta-btn canta-btn--primary canta-btn--lg">Large</button>

Com Icones

Estados

Button Group

API

Classe	Descricao
`.canta-btn`	Classe base do botao (obrigatoria)
`.canta-btn--primary`	Botao primario (azul CANTA)
`.canta-btn--secondary`	Botao secundario (preto)
`.canta-btn--outline`	Botao com borda sem preenchimento
`.canta-btn--ghost`	Botao transparente, texto apenas
`.canta-btn--danger`	Botao de acao destrutiva (vermelho)
`.canta-btn--success`	Botao de sucesso (verde)
`.canta-btn--warning`	Botao de aviso (amarelo)
`.canta-btn--info`	Botao informativo (azul)
`.canta-btn--magenta`	Botao magenta CANTA
`.canta-btn--neo-brutal`	Variante neo-brutalista
`.canta-btn--brutal-3d`	Efeito 3D brutalista
`.canta-btn--pill`	Bordas totalmente arredondadas
`.canta-btn--link`	Estilo de link
`.canta-btn--inverted`	Para fundos escuros
`.canta-btn--sm`	Tamanho pequeno
`.canta-btn--lg`	Tamanho grande
`.canta-btn--icon-only`	Apenas icone, sem texto
`.canta-btn--full-width`	Largura total (100%)
`.canta-btn--loading`	Estado de carregamento com spinner
`.canta-btn-group`	Container para agrupar botoes