Este exemplo usa apenas os controles do gerador. As imagens acima mostram folhas de estilo baixadas reais aplicadas a botões HTML comuns, não capturas de tela do editor.
Comece com Signature
Abra o Gerador de Botões CSS. Em Predefinições, escolha Signature na coleção Everyday. Defina o texto do botão como “Get started”. Na área de código, defina o nome da Classe como cta-button.
Uma predefinição substitui os estilos padrão e de hover, enquanto seu rótulo e nome de classe permanecem. Escolha seu ponto de partida antes de fazer ajustes detalhados.
O nome da classe conecta as regras CSS ao seu botão HTML. O gerador limpa caracteres não suportados; use um nome curto e distinto para evitar estilizar elementos não relacionados.
Crie o botão arredondado com gradiente
Mantenha o estado de Edição em Padrão. Em Texto, escolha System sans, tamanho da fonte 18 px e peso Negrito. Mantenha a cor do texto branca, estilo normal, alinhamento centralizado e altura da linha 1.4.
Em Preenchimento, selecione Gradiente linear. Use as duas cores e o ângulo abaixo. Defina o preenchimento horizontal como 32 px e o preenchimento vertical como 16 px. Em Forma, mantenha Vincular todos os cantos ativado e defina o raio do canto como 100 px. A largura da borda permanece 0 px.
Em Sombra, mantenha a Sombra da caixa ativada. Use deslocamento horizontal 0 px, deslocamento vertical 8 px, desfoque 24 px, expansão −4 px, cor #460BD8 e opacidade 32%. Deixe a sombra interna e a sombra do texto desativadas.
O preenchimento altera o espaço ao redor do texto. O raio do canto altera o contorno. Um raio grande cria esse formato arredondado sem tornar o rótulo mais largo.
Dê ao hover seu próprio tratamento
Mude o estado de Edição para Hover. Em Preenchimento, altere a cor de fundo para #33099E e a segunda cor para #6D20BF. Mantenha o ângulo do gradiente em 135°. Em Sombra, altere o deslocamento vertical para 10 px e o desfoque para 28 px. Deixe as outras configurações inalteradas.
Use os botões Padrão, Hover e Ativo da tela para inspecionar cada estado. Você também pode passar o mouse ou pressionar o botão de visualização. Alterne a tela entre claro e escuro para revisar sua borda e sombra.
O estado de Edição escolhe quais estilos você altera. O estado da tela apenas altera o que você visualiza. Retorne à edição Padrão antes de ajustar a aparência de repouso.
As propriedades de hover que ainda correspondem ao padrão seguem edições padrão posteriores. Depois de personalizar uma propriedade de hover, ela permanece independente. Verifique novamente ambos os estados após alterar o estilo base.
Exportar e testar em sua página
Selecione a guia CSS e use Copiar CSS, ou escolha Baixar para salvar cta-button.css. Selecione a guia HTML e copie a marcação do botão correspondente. O HTML inclui o mesmo nome de classe e um botão com type="button".
Adicione o CSS à sua folha de estilo ou vincule o arquivo baixado da sua página. Coloque o HTML onde o botão pertence. As duas exportações funcionam juntas: um botão HTML sozinho não inclui seu estilo.
Abra a página e teste seus estados padrão, hover, foco do teclado e pressionado. A exportação inclui um contorno de foco visível, um pequeno movimento ativo e uma regra de redução de movimento. Seus estilos circundantes e fontes instaladas ainda podem afetar o resultado.
O botão gerado é um controle estilizado. Conecte seu comportamento de clique em seu projeto; use o tipo de botão correto ao adicioná-lo a um formulário.
cta-button.css
O nome do arquivo baixado segue o nome da classe.
Perguntas comuns
Preciso de um framework CSS?
Não. A saída é CSS padrão mais um botão HTML simples. Cole o CSS em sua própria folha de estilo e use a classe correspondente no botão.
O Download salva o HTML também?
O download salva um arquivo .css nomeado após a classe. Copie a marcação do botão separadamente da guia HTML.
Posso dar a cada canto um raio diferente?
Sim. Em Forma, desative Vincular todos os cantos e, em seguida, defina Superior esquerdo, Superior direito, Inferior direito e Inferior esquerdo independentemente. Este exemplo os mantém vinculados para um formato arredondado.
O meu design ainda estará aqui na próxima vez?
O estúdio tenta salvar o rascunho atual no armazenamento local deste navegador. Não se trata de uma conta ou de um backup entre dispositivos. As configurações do navegador, a limpeza de dados do site ou a redefinição podem remover ou substituir o rascunho, portanto, exporte o trabalho que deseja manter.
O meu botão é carregado para um servidor?
A pré-visualização do estilo e a geração de CSS/HTML são executadas no seu navegador. O editor não carrega o texto do seu botão ou o rascunho de estilo para criar a exportação.
Dê ao seu próximo botão o seu próprio estilo.
Escolha um ponto de partida, ajuste os detalhes e leve o código para o seu projeto.