Generatore di pulsanti CTA
Progetta un link CTA per il sito web, visualizzane colori e dimensioni, verifica il contrasto del testo e copia o scarica HTML e CSS sicuri.
Dettagli e stile della CTA
Inserisci la destinazione e l'etichetta visibile, quindi scegli gli stili controllati del pulsante per il tuo sito web.
Anteprima e codice della CTA
Controlla il link visibile, l'host di destinazione, il contrasto, lo stile del focus e il markup generato prima della pubblicazione.
Come creare una CTA per un sito web
Usa un testo visibile che indichi ai visitatori cosa otterranno, ad esempio “Richiedi un preventivo” o “Visualizza le specifiche del prodotto”.”
Conferma l'URL finale, i colori predefiniti e al passaggio del mouse, la dimensione del pulsante, il nome accessibile e lo stile del focus da tastiera.
Inserisci l'HTML e il CSS nel tuo sito, quindi testa il link reale con una tastiera, uno screen reader, un telefono e un browser desktop.
Note su codice, contrasto e accessibilità
Il generatore crea un'ancora con stile perché questa CTA apre un URL di destinazione. Il testo del pulsante, le etichette accessibili, i nomi delle classi e gli URL vengono convalidati e sottoposti a escape. Sono accettate solo destinazioni HTTP o HTTPS complete. L'apertura in una nuova scheda aggiunge automaticamente `noopener noreferrer`; nofollow viene aggiunto solo se selezionato.
Il calcolo del contrasto segue la formula della luminanza relativa WCAG 2.2. I preset compatto e standard utilizzano il riferimento AA 4.5:1 per il testo. Il preset grande utilizza il riferimento 3:1 per il testo grande quando il peso è 700 o 800; il testo grande con peso 600 continua a utilizzare 4.5:1. Controlla entrambi i colori, predefinito e al passaggio del mouse. Questo test riguarda solo i colori del testo della CTA, non la visibilità del focus, il layout circostante, lo zoom, la dimensione per il tocco, lo scopo del link o l'accessibilità dell'intera pagina.
W3C: Comprendere il contrasto (minimo)Gestione dei dati: I dettagli della CTA, l'anteprima, il codice generato, le copie negli appunti e il download rimangono nel tuo browser. Nulla di ciò che inserisci qui viene caricato o memorizzato da questo strumento.
Trasforma gli asset della campagna in una presenza connessa sul mercato
Scopri i servizi TradeGoAI per preparare contenuti commerciali più chiari, organizzare asset pronti per il mercato e aumentare la visibilità sui mercati internazionali.
Domande frequenti
Questo generatore crea un link o un pulsante per un modulo?
Crea un link di ancoraggio con lo stile di un pulsante call-to-action. Usalo quando il clic sulla CTA deve aprire un’altra pagina. Usa un vero elemento pulsante per azioni come l’invio di un modulo, l’apertura di una finestra di dialogo o la modifica dell’interfaccia corrente.
Quali URL di destinazione sono accettati?
La destinazione deve essere un URL HTTP o HTTPS completo. Gli URL JavaScript, data, file, relativi e contenenti credenziali vengono rifiutati. Verifica la destinazione finale e i parametri di monitoraggio prima di pubblicare la CTA.
Cosa significa il risultato del contrasto?
Il risultato confronta il colore del testo selezionato con gli sfondi predefinito e al passaggio del mouse. Utilizza il riferimento WCAG 2.2 AA di 4,5:1 per il testo ordinario o di 3:1 per il preset grande con peso 700 o 800. Il superamento di questo controllo del colore non dimostra di per sé che un’intera pagina sia accessibile.
Quando devo aggiungere un'etichetta accessibile?
Utilizza l’etichetta accessibile opzionale solo quando il testo CTA visibile non descrive chiaramente la destinazione. Dai innanzitutto la preferenza a un testo visibile chiaro. L’attributo aria-label generato sostituisce il testo visibile come nome del link per le tecnologie assistive, quindi deve descrivere lo stesso scopo.
Le informazioni del mio CTA vengono caricate o archiviate?
No. La convalida, l'anteprima, il calcolo del contrasto, la generazione del codice, la copia e il download avvengono nel tuo browser. TradeGoAI non riceve né memorizza i contenuti inseriti in questo strumento.