Gerador de Botões CTA
Crie um link de CTA para o seu site, pré-visualize as respetivas cores e tamanho, verifique o contraste do texto e copie ou descarregue HTML e CSS seguros.
Detalhes e estilo da CTA
Introduza o destino e o rótulo visível e, em seguida, escolha estilos de botão controlados para o seu site.
Pré-visualização e código do CTA
Revise o link visível, o host de destino, o contraste, o estilo de foco e a marcação gerada antes de publicar.
Como criar um CTA para um site
Use um texto visível que informe aos visitantes o que eles obterão, como “Solicitar um orçamento” ou “Ver especificações do produto.”
Confirme o URL final, as cores padrão e ao passar o mouse, o tamanho do botão, o nome acessível e o estilo de foco do teclado.
Insira o HTML e o CSS no seu site e, em seguida, teste o link real com um teclado, leitor de tela, telefone e navegador para desktop.
Notas sobre código, contraste e acessibilidade
O gerador cria uma âncora estilizada porque este CTA abre um URL de destino. O texto do botão, os rótulos de acessibilidade, os nomes das classes e os URLs são validados e escapados. Só são aceites destinos HTTP ou HTTPS completos. Ao abrir um novo separador, `noopener noreferrer` é adicionado automaticamente; `nofollow` só é adicionado quando selecionado.
O cálculo do contraste segue a fórmula de luminância relativa da WCAG 2.2. As predefinições compacta e padrão utilizam a referência de texto AA de 4.5:1. A predefinição grande utiliza a referência de texto grande de 3:1 quando o peso é 700 ou 800; o texto grande com peso 600 continua a utilizar 4.5:1. Verifique as cores padrão e de hover. Este teste abrange apenas as cores do texto do CTA, não a visibilidade do foco, o layout envolvente, o zoom, o tamanho para toque, a finalidade do link ou a acessibilidade da página inteira.
W3C: Compreender o contraste (mínimo)Tratamento de dados: Os detalhes do seu CTA, a pré-visualização, o código gerado, as cópias para a área de transferência e a transferência permanecem no seu navegador. Nada do que inserir aqui é carregado ou armazenado por esta ferramenta.
Transforme ativos de campanha numa presença de mercado integrada
Explore os serviços da TradeGoAI para preparar conteúdos de vendas mais claros, organizar ativos prontos para o mercado e aumentar a visibilidade nos mercados internacionais.
Perguntas Frequentes
Este gerador cria um link ou um botão de formulário?
Ele cria um link âncora estilizado como um botão de chamada para ação. Use-o quando clicar no CTA deverá abrir outra página. Use um elemento de botão real para ações como enviar um formulário, abrir uma caixa de diálogo ou alterar a interface atual.
Quais URLs de destino são aceites?
O destino deve ser um URL HTTP ou HTTPS completo. URLs JavaScript, data, file, relativas e que contenham credenciais são rejeitados. Revise o destino final e os parâmetros de rastreamento antes de publicar o CTA.
O que significa o resultado do contraste?
O resultado compara a cor do texto selecionado com os fundos padrão e de foco. Ele usa a referência AA da WCAG 2.2 de 4,5:1 para texto comum ou 3:1 para a predefinição de texto grande com peso 700 ou 800. Passar nesta verificação de cor, por si só, não comprova que uma página inteira seja acessível.
Quando devo adicionar um rótulo acessível?
Use o rótulo acessível opcional apenas quando o texto visível do CTA não descrever claramente o destino. Dê prioridade a um texto visível claro. O aria-label gerado substitui o texto visível como nome do link para tecnologias assistivas, portanto, deve descrever a mesma finalidade.
As informações do meu CTA são carregadas ou armazenadas?
Não. A validação, a pré-visualização, o cálculo do contraste, a criação do código, a cópia e a transferência ocorrem no seu navegador. A TradeGoAI não recebe nem armazena o conteúdo introduzido nesta ferramenta.