Inserire un pulsante personalizzato usando il codice HTML

Per spiegare come creare un pulsante web personalizzato il miglio modo per farlo è fare un esempio e poi indicare il codice usato per personalizzare i diversi attributi del pulsante web.

Quindi a titolo di esempio per inserire un pulsante personalizzato all'interno della nostra pagina web che ci colleghi selezionandolo ad un indirizzo internet posizionarsi dove vogliamo inserirlo e digitiamo il seguente codice HTML:

<form 
method="get" action="INDIRIZZO_URL">
<input type="submit" value="TESTO_PULSANTE" 
style="background-color: #ce401c; 
width: 15em;
padding: .5em;
color: #ffffff;
text-shadow: 1px 1px 1px #000;
font: 16px Arial, Helvetica, sans-serif;
border: solid thin #882d13;
-webkit-border-radius: .7em;
-moz-border-radius: .7em;
border-radius: .7em;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));">
</form>

Nel nostro caso dovremo digitare il seguente codice HTML:

<form 
method="get" action="http://www.puntoinformaticofree.it">
<input type="submit" value="Scopri di più" 
style="background-color: #ce401c; 
width: 15em;
padding: .5em;
color: #ffffff;
text-shadow: 1px 1px 1px #000;
font: 16px Arial, Helvetica, sans-serif;
border: solid thin #882d13;
-webkit-border-radius: .7em;
-moz-border-radius: .7em;
border-radius: .7em;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));">
</form>

Produrremo:

Per i colori dei pulsanti e del testo al loro interno possiamo scegliere tra una grande vastità di colori.

A questa pagina possiamo consultare l'elenco dei colori HTML con codice esadecimale.

I codici esadecimali dei colori

Gli stili del pulsante

Spieghiamo ora le righe del codice HTML dell'esempio sopra che conpongono lo stile del pulsante. Comprendendo come viene creato lo stile del pulsante sappiamo come modificarlo per creare un eventuale pulsante diverso che ci piaccia di più.

Apertura form:

Digitiamo il codice dell'apertura del contenitore in cui inseriamo il pulsante HTML:

<form

Link Web e testo pulsante:

Digitiamo il codice dell'apertura del contenitore in cui inseriamo il pulsante HTML:

method="get" action="http://www.puntoinformaticofree.it">
<input type="submit" value="Scopri di più"

Colore di sfondo del pulsante:

Digitiamo il codice del colore di sfondo del pulsante HTML:

style="background-color: #ce401c;

Padding e larghezza

Digitiamo il codice del padding (il padding è la distanza tra il testo ed il bordo di un contenitore) e della larghezza del pulsante:

width: 15em;
padding: .5em;

Colore del testo, ombreggiatura e font:

Digitiamo il codice del colore del testo, ombreggiatura e font:

color: #ffffff;
text-shadow: 1px 1px 1px #000;
font: 16px Arial, Helvetica, sans-serif;

Arrotondare gli angoli del pulsante:

Digitiamo il codice per arrotondare gli angoli del pulsante:

border: solid thin #882d13;
-webkit-border-radius: .7em;
-moz-border-radius: .7em;
border-radius: .7em;

Sfondo con gradiente:

Digitiamo il codice per applicare lo sfondo con gradiente:

background-image: -webkit-gradient(linear, left top, left bottom,
from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));">

Potrebbe sembrare complicata, ma non lo è.

Il nome della funzione è gradient (poiché è sperimentale usiamo il prefisso -webkit-).

Poi specifichiamo il tipo di gradiente. Vogliamo un gradiente lineare.

Dopo specifichiamo i punti di inizio e finale del gradiente: nel nostro caso la parte superiore (top) e inferiore (bottom) dell’elemento, su una linea verticale.

Specifichiamo poi i colori iniziali e finali, e infine un colore di stop situato al 40% verso la parte inferiore dell’elemento. Insieme, questo crea un gradiente con una transizione morbida dal colore iniziale nella parte alta, verticalmente fino al colore di stop, con un’altra transizione morbida verso il colore finale.

Chiusura form:

Digitiamo il codice della chiusura del contenitore in cui inseriamo il pulsante HTML:

</form>

Risultato finale:

Quindi il coidice finale sarà il seguente:

<form 
method="get" action="http://www.puntoinformaticofree.it">
<input type="submit" value="Scopri di più" 
style="background-color: #ce401c; 
width: 15em;
padding: .5em;
color: #ffffff;
text-shadow: 1px 1px 1px #000;
font: 16px Arial, Helvetica, sans-serif;
border: solid thin #882d13;
-webkit-border-radius: .7em;
-moz-border-radius: .7em;
border-radius: .7em;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));">
</form>

E produrrà:

Markdown Tutorial