Come creare pulsanti on-off CSS3

Se sei stanco dei soliti pulsanti per i form del tuo sito e vuoi dare un look un po’ più moderno magari in stile mobile copiando i pulsanti di iOS o Android, puoi usare il generatore online di pulsanti on-off in css3. Con una semplice interfaccia online puoi configurare ogni aspetto del pulsante, scegliendo anche il tipo di transizione animata da usare durante il click. Vediamo allora come creare pulsanti on-off css3.

L’applicazione che permette di create pulsanti on-off in stile mobile, è FlipSwitch Generator, ed è disponibile gratuitamente online. Permette di creare pulsanti compatibili con la maggior parte dei moderni browser web e os: Chrome, Firefox, Safari, Opera, IE9, Android e anche iOS. 

Iniziamo

FlipSwitch Generator ha una interfaccia molto semplice ed intuitiva che permette di vedere un’anteprima live di ogni modifica effettuata.

Come si vede dalla schermata di FlipSwitch Generator, la configurazione del pulsante è divisa in 6 zone, ognuna delle quali permette di modificare ogni singolo parametro del pulsante da visualizzare. Nella sezione Style puoi selezionare lo stile del pulsante scegliendo tra iOS4/5, Android e Windows 8. La selezione custom ti permette di creare un pulsante partendo da zero.

Sotto ci sono due link che permettono di creare un pulsando adottando uno stile casuale o resettando le impostazioni allo stato iniziale. Nel riquadro Active state e Inactive state, puoi modificare il colore di sfondo, il colore del testo, e il colore della label del pulsante che stai creando. Puoi inoltre modificare il testo On Off scegliendo un testo completamente differente come ad esemipo Muto o Acceso/Spento

Nella sezione Switch puoi modificare la dimensione del pulsante, il colore di sfondo, il colore del bordo e la posizione di default.

Nelle sezioni Label e Sizing, puoi modificare la dimensione del font, lo spazio tra le lettere e la dimensione del pulsante.

Prelevare il codice

Quando sei soddisfatto del risultato ottenuto, puoi prelevare il codice html e css da utilizzare nel tuo sito. Puoi prelevarli selezionandoli dalle relative caselle di testo oppure direttamente copiandoli negli appunto cliccando sul link Copy to clipboard posizionato in alto a destra della casella del codice..

Non ti resta altro da fare che incollarlo all’interno delle tue pagine web per avere a disposizione un pulsante on-off con uno stile completamente rinnovato.