• …vuoi RADDOPPIARE le visite del tuo sito? Scegli il miglior Hosting WordPress!

Giuseppe Fava

Follow @giuseppe_fava
  • Home
  • Internet
    • WordPress
    • Joomla
  • Pc e Software
    • Windows
    • Linux
  • Mobile VoIP
  • Altro
Home » Come creare pulsanti on-off CSS3

Come creare pulsanti on-off CSS3

di Giuseppe Fava Lascia un commento

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.Come creare pulsanti on-off

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. 

Come creare pulsanti on-off

Iniziamo

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

Come creare pulsanti on-off

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.

Come creare pulsanti on-off

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

Come creare pulsanti on-off

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

Come creare pulsanti on-off

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

Come creare pulsanti on-off

Come creare pulsanti on-off

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..

LEGGI ANCHE:   Come installare Wiki aziendale

Come creare pulsanti on-off

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.

FacebookTwitterLinkedinPinterest

Archiviato in:Internet Contrassegnato con: css, html, web

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

offerte amazon
Ad - Web Hosting SiteGround - Creato per semplificare la gestione del sito. Clicca per scoprire di più.

Copyright © 2023 · Privacy policy · Realizzato da Giuseppe Fava · con il miglior hosting WordPress · Contatti

Go to mobile version