Avete un sito web o un e-commerce e volete arricchirlo con nuovi pulsanti che rimandino a specifiche azioni? Al tempo stesso non volete saperne di grafica, codici e altre cosucce tecniche? Niente panico, esistono diversi metodi per creare pulsanti 3D per un sito senza dover sbattere prima la testa su libri o corsi specifici, raggiungendo un risultato più che apprezzabile sia dal punto di vista funzionale che da quello estetico.

In effetti, spesso abbiamo necessità di inserire nel nostro sito un nuovo tasto, che permetta una migliore accessibilità ai diversi servizi offerti. Parlo di un pulsante che riesca quindi a guidare facilmente l’utente nella propria ricerca, senza farlo perdere in passaggi lunghi e noiosi, che potrebbero preludere all’abbandono del sito stesso.

Che c’è di meglio di un bel tasto in 3D per una call to action o per facilitare la navigazione nel sito, per allestire un menu visibile e fruibile? E che c’è di meglio di un bel badge per indirizzare correttamente gli utenti al download di materiale presente nel sito?

Esistono svariati servizi online che vi permettono di creare pulsanti 3D per un sito web in pochi passaggi, potendo monitorare costantemente l’anteprima delle modifiche durante la creazione stessa del tasto. Vi basterà modificare le impostazioni secondo le vostre necessità e i vostri gusti e salvare poi il lavoro per usarlo sul vostro sito.

Ecco una lista di 5 servizi per creare pulsanti 3D per qualsiasi tipo di progetto web. E sono tutti gratuiti e facili da adoperare.

 

Creare pulsanti 3D per un sito con As Button Generator

Il primo programma della lista è un tool per progettare pulsanti 3D che vi permette di creare un’immagine da salvare in formato .png, che andrete a inserire successivamente nel vostro sito.
Tranquilli, ogni passaggio è guidato passo dopo passo.  😉  Nella parte superiore del tool, possiamo notare un pulsante rosso al centro, che è l’attuale anteprima di ciò che è impostato nella sezione inferiore, costituita da diverse tab per ogni tipo di settaggio.
Da “Color/Form” è possibile scegliere il colore del pulsante 3D e le sue dimensioni, nonché il colore del bordo dello stesso e il relativo spessore.
Cliccando sul quadratino in rosso potremo facilmente scegliere la sfumatura di colore desiderata per il tasto 3D e confermare su “Ok”, mentre le dimensioni possono essere regolate spostando il triangolino di tacca in tacca, e visionandone direttamente il risultato.
La scheda Gradation Type, poi, permette la scelta tra diversi effetti grafici, mentre in “Stripe”  possiamo aggiungere, modificare o rimuovere le strisce di fondo. Oppure in “Filter” possiamo scegliere il tipo di effetto 3D o la posizione dell’ombra.
Infine, in “Image” possiamo aggiungere un’immagine in particolare, come ad esempio un logo, e modificare la dicitura del tasto in “Text”.

 

Creare pulsanti 3D per un sito con Free Web Button Maker

Qui ci troviamo alle prese con due diversi generatori di tasti, e dall’anteprima possiamo già selezionare quello che più ci aggrada, esteticamente parlando.
In base alla nostra scelta, ci troveremo davanti a diversi pulsanti 3D con particolari caratteristiche, e dallo “Step 2” sarà possibile stabilire se abbiamo bisogno di un semplice pulsante oppure di un insieme di tasti che andrà a costituire il menu.
Ogni nostra scelta porterà la pagina ad aggiornarsi velocemente, per mostrarci la relativa anteprima. Non dobbiamo temere di scegliere tra le diverse opzioni, perché qualsiasi modifica sarà immediatamente visibile: nel caso in cui non saremo soddisfatti del risultato, possiamo semplicemente tornare indietro e creare pulsanti 3D nuovi.
Una volta impostati tutti i parametri necessari alla creazione del nostro pulsantone tridimensionale, possiamo selezionarlo e deciderne la grandezza, il colore, il testo, fino a cliccare “Click here to generate your Button” per avere l’immagine dello stesso oppure un codice HTML da incorporare nel sito.

 

Creare pulsanti 3D per un sito con Call-to-Action Button Generator

Avete voglia di richiamare l’attenzione dell’utente per mostrargli una call to action? Questo strumento fa per voi, permettendovi di creare pulsanti in 3D mettendovi a disposizione tutto l’occorrente per effettuare le modifiche, direttamente a portata del vostro mouse!
La schermata si presenta come molto intuitiva. Il primo passo riguarda la scelta del colore, volendo raggiungibile anche con un codice esadecimale, successivamente dobbiamo inserire il testo che comparirà sul tasto 3D cliccabile, e poco sotto procederemo alla regolazione di grandezza, colori per le sfumature, spessore del bordo, oppure passeremo alla scelta dell’icona che comparirà accanto al testo o all’aggiunta dell’effetto ombra.
A fine lavoro, potremo ottenere il pulsante 3D cliccando su “Get CSS Code” oppure su “Download as PNG image”, a seconda delle esigenze.

 

Creare pulsanti 3D per un sito con CSS Button Generator

Con CSS Button Generator progettare e realizzare pulsanti 3D per un sito vi sembrerà più facile che mai, grazie all’organizzazione compatta e pratica delle impostazioni, che riuscirà a non farvi perdere tra millemila settaggi.
Innanzitutto va inserito il testo, successivamente occorre scegliere il carattere dello stesso e il relativo colore. Poco sotto stabiliamo la grandezza in pixel del pulsante 3D che ci serve e il colore dell’ombra di testo con le relative personalizzazioni.
Aprendo poi la sezione “Box”, accederemo alla regolazione della grandezza del pulsante e della relativa distanza del testo dai bordi. Oppure in “Border” andremo a modificare gli effetti del bordo del badge, mentre in “Background” sarà possibile scegliere le diverse sfumature.
Infine, in “Hover” si visualizzerà il colore del tasto 3D nel momento in cui sarà sfiorato dal cursore del mouse.
Nella parte inferiore della pagina web sarà disponibile un codice per integrare il pulsante appena creato nel nostro sito web.

 

Creare pulsanti 3D per un sito con Da Button Factory

Passiamo a Da Button Factory, una vera e propria fabbrica per creare pulsanti 3D per un sito web, altrettanto semplice e intuitiva, che offre vari livelli di personalizzazione del tasto da cliccare, per essere indirizzati in un sezione specifica del sito o verso un servizio o prodotto in particolare.
Trovo estremamente utile la possibilità offerta da questo servizio di dare un’occhiata a pulsanti esempio, per farsi un’idea della creazione che sarà effettuata di lì a poco, semplicemente cliccando sulla scritta “Examples” in alto a destra.
Da qui, avremo accesso a un elenco di pulsanti 3D già pronti da poter modificare come più ci piace, cliccando sulla scritta “edit this button” corrispondente.
In ogni caso, per modificare o creare da zero i nostri pulsanti 3D, inizieremo dall’inserimento del testo e dalla scelta del font stesso, con grandezza e relativo colore.
Successivamente, potremo scegliere di aggiungere l’ombra alla nostra scritta sul tasto 3D o di adattare la grandezza dello stesso al testo contenuto, senza dimenticare lo stile del bottone (rotondo, rettangolare o con i bordi arrotondati).
Infine, la scelta del colore e delle eventuali sfumature darà il tocco finale alla personalizzazione del badge, che potremo scaricare cliccando su “Download” come png, gif, jpg o ico. In alternativa, potremo ricavarne indirizzo URL o codice CSS cliccando su “Embed”.

 

E voi avete mai usato uno di questi tool appena elencati per creare pulsanti 3D per il vostro sito web o e-commerce?

Avete dei suggerimenti sulla creazione di bottoni 3D oppure ricordate di esperienze particolarmente negative? Preferite il fai da te di uno di questi servizi o credete sia meglio affidarsi alle mani di un esperto designer anche per questo tipo di lavori grafici?

 

Questo articolo su come creare pulsanti 3D per un sito web o un e-commerce è un guest post di Maria Grazia Tecchia, web writer professionista e appassionata di smartphone, tablet, computer e di qualsiasi accessorio tecnologico in genere.
Oltre che un’esperta di comunicazione online, Maria Grazia è anche l’autrice di Tecnologia 360, blog in cui coniuga l’arte della scrittura per il web alla sua passione per tutto ciò che è device tecnologico.