utilizzare gli elementi di blocco come pulsanti

[howdoit]

Moltissimi dei siti che visualizzate li utilizzano,rendono la navigazione piú “user friendly” e migliorano notevolemente la grafica delle nostre pagine.
I classici “div” che utilizziamo per impaginare ci tornano utili anche per creare pulsanti e/o link
Vi riporto il codice indispensabile alla loro creazione:

<a href="#"><div id="button"><p>cliccami!</p></div></a>

Come vedete non c’é nulla di complesso,spieghiamolo per chi non é pratico di html,abbiamo creato un link(in questo caso non porta a nulla dato che il valore di “href” é #) e al suo interno abbiamo inserito un elemento di blocco con id “button”.
Proviamo ora a dargi un minimo di stile definendo le dimensioni e la posizione del nostro pulsante:

<style>
a{text-decoration:none;}
#button{position:relative;margin:100px auto;width:200px;height:150px;background-color:beige;border:1px solid black;text-align:center;}
#button p{position:relative;margin:65px auto;color:black;font-size:20px;text:style;font-style:italic;}
</style>

Ovviamente questo é un esempio molto base ma ci aiuta a familarizzare con un elemento grafico utilissimo,potremmo continuare,ad esempio,inserendo un hover e tramite la proprietá transition regolarne la velocitá:

#button{position:relative;margin:100px auto;width:200px;height:150px;background-color:beige;border:1px solid black;text-align:center;transition:1s;}
#button:hover{background-color: rgba(200, 100, 255, 0.5);}

Il css ci permette tantissime personalizzazioni,oltre al colore si potrebbe anche modificarne la forma,di seguito vi mostro un esempio semplicissimo ma che vi consiglio di approfondire poiché si possono ottenere effetti molto interessanti:

#button:hover{background-color: rgba(200, 100, 255, 0.5);border-radius:30px;}

ecco il risultato finale con il relativo codice completo:

<style>
a{text-decoration:none;}
#button{position:relative;margin:100px auto;width:200px;height:150px;background-color:beige;border:1px solid black;text-align:center;transition:1s;}
#button:hover{background-color: rgba(200, 100, 255, 0.5);border-radius:30px;}
#button p{position:relative;margin:65px auto;color:black;font-size:20px;text:style;font-style:italic;}
</style>
<a href="#"><div id="button"><p>cliccami!</p></div></a>

Ovviamente non finise qui,possiamo inserire un immagine al posto della scritta tramite le proprietá background-image: url() e background-repeat:no-repeat,la prima indica il percorso di dove si trova la nostra immagine (percorso assoluto o relativo) e il secondo (in questo caso) serve a fare in modo che non venga ripetuta piú volte.

Per vedere alcuni semplici esempi con i relativi codici vi rimando su HOW DO IT