CSS Button Generator

Utilizza il generatore automatico per creare fantastici bottoni in puro CSS per il tuo sito. Puoi creare un fantastico bottone CSS in pochi secondi e puoi applicarlo al tuo sito con un semplice copia/incolla.

Colori di testo e sfondo

Bordo

1 px

Forma e Dimensioni

4 px
20 px
10 px
 

Creare bottoni ad effetto senza utilizzare immagini?

Per creare bellissimi bottoni per il tuo sito web non hai più bisogno di utilizzare immagini, grazie alle novità introdotte da CSS3, infatti, è possibile creare bellissimi pulsanti web utilizzando un semplice markup HTML e CSS.

Ad esempio è possibile trasformare un comune link in un bottone ad alto impatto visivo, semplicemente applicandogli le giuste proprietà CSS: grazie a CSS3, infatti, possiamo arricchire i nostri elementi di effetti grafici quali angoli arrotondati, ombre, effetti gradiente, mouseover e molto altro ancora.

Ovviamente non è facile creare il giusto style e se non si hanno competenze nella gestione dei fogli di stile l'operazione può rivelarsi assai più complessa del previsto.

Fortunatamente, però, è possibile trovare on-line moltissimi codici di bottoni CSS pronti all'uso oppure utilizzare degli strumenti visuali come il generatore di bottoni CSS che trovate all'interno di questa pagina.

Come utilizzare il CSS button generator di Toolset.it?

Utilizzare il tool di generazione automatica di bottoni CSS è molto semplice e non richiede alcuna competenza specifica. E' possibile configurare ogni aspetto del bottone in modo semplice ed intuitivio e poi copiare/incollare il codice ottenuto all'interno del proprio sito web.

Vediamo di seguito come utilizzare lo strumento:

  • per prima cosa è necessario impostare il testo: il generatore prevede due linee di testo, la prima obbligatoria, la seconda facoltativa (può essere disattivata togliendo la spunta a sinistra); per il testo può essere definito un colore (che verrà applicato ad entrambe le linee di testo) ed il font-size di ogni linea;
  • una volta definito il testo è consigliabile definire il colore del bottone, utilizzando uno dei colori predefiniti oppure impostandone uno a piacimento utilizzando il selettore sulla destra;
  • per finire non resta che impostare un valore per gli angoli arrotondati (0 = angoli retti) e per la spaziatura interna (0 = nessuna spaziatura).

Una volta completato il lavoro non resta che cliccare sul bottone "Ottieni il codice" e poi copiare le regole CSS generate automaticamente all'interno del foglio di stile del proprio sito web (all'interno trovate anche un commento con la sintassi HTML del bottone).


Altri tool interessanti