Generatore per creare bellissimi bottoni solo con HTML e CSS.

CSS3 Button Generator per ricavare il codice HTML e CSS dei bottoni da pubblicare nel nostro sito in un widget, in una pagina o in un post.

I pulsanti o bottoni sono uno degli oggetti più usati nel web e possono essere creati con un programma di grafica o anche soltanto con codici dei linguaggi HTML e CSS. Abbiamo già visto come creare bottoni sia con immagini che con codice quindi si può fare riferimento a tale post per una trattazione completa dei codici da utilizzare.

In questo articolo vediamo invece come usare un generatore di bottoni per fare un lavoro assolutamente professionale. Non occorre neppure una gran conoscenza di linguaggio di programmazione visto che il codice da usare verrà copiato da uno strumento online.

CSS3 Button Generator è uno strumento con cui si possono creare dei bellissimi bottoni personalizzati. Ci sono quattro passaggi da configurare: Base Settings, Background, Drop Shadow e Text Shadow. In ciascuno di queste schede ci sono strumenti per creare il bottone. La creazione di un pulsante con questo strumento è interessante anche dal punto di vista euristico perché permette di visualizzare in tempo reale come si modifica un oggetto operando su un dato parametro.

In Base Setting si digita il testo del bottone, si sceglie la dimensione dei caratteri e il colore del testo in formato RGB, vale a dire impostando una terna di numeri da 0 a 255 come illustrato nel post sui codici dei colori. I valori possono essere digitati oppure selezionati tramite dei cursori. Su Radius si imposta l'arrotondamento degli angoli del bottone mentre Padding è la distanza tra il testo e il bordo. Quando si aumenta il padding aumentano le dimensioni del bottone.

Su Background si sceglie lo sfondo del bottone, o gli sfondi, visto che se ne possono scegliere due

Si tratta in sostanza di creare un gradiente di cui scegliere la direzione. Di default sono impostati 90 gradi vale a dire una direzione verticale. Si impostano i colori iniziali e finali e anche le percentuali di inizio e fine dei due colori. Per una sfumatura omogenea è meglio impostare 0% per il colore iniziale e 100% per quello finale. Anche in questo caso si usa la rappresentazione RGB.

In Drop Shadow si imposta l'Ombreggiatura. L'Angolo è impostato a 90 gradi come sopra

In Distance si sceglie la distanza della Ombreggiatura mentre su Blur si sceglie la intensità della Sfocatura. Si imposta poi il colore dell'Ombreggiatura e la sua Opacità.

Infine su Text Shadow si può opzionalmente inserire una Ombreggiatura anche nel Testo

Quando abbiamo terminato in basso verranno visualizzati i codici HTML e CSS

Come vedete nel codice HTML viene usata la classe "button" che però può essere sostituita anche da un'altra. Prima dell'HTML va incollato il codice CSS con questa struttura

<style>
.button {
CODICE COPIATO DA CSS3 BUTTON GENERATOR
}
</style>

Al posto del cancelletto # nell'HTML va incollato l'URL da aprire quando si clicca sul bottone. Opzionalmente si può anche aggiungere target="_blank" per fare aprire l'URL in un'altra scheda e aggiungere <div align='center'> all'inizio dell'HTML e </div> alla fine per centrare il pulsante.

Dopo che avrete pubblicato il codice vi accorgerete che il colore del testo è diverso da quello impostato e che si vedrà un undescore sotto il testo del pulsante al passaggio del mouse. Sono le impostazioni del blog che vengono ereditate anche dal pulsante. Per eliminare questa eredità

va incollata all'interno delle parentesi graffe la riga
 text-decoration:none !important;

che serve per eliminare l'underscore e aggiungere !important prima del punto e virgola nella riga del colore come mostrato nello screenshot precedente.