personalizzare i pulsanti del nostro sito non potrebbe essere piú semplice di cosí 😀

Moltissimi dei siti che visualizzate li utilizzano,rendono la navigazione piú “user friendly” e migliorano notevolemente la grafica delle nostre pagine,stiamo parlando degli elementi di blocco.
Avete capito bene,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:

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

ecco il risultato finale con il relativo codice completo:

cliccami!

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

alcuni esempi

home

<style>
a{text-decoration:none;}
#buttonA{position:relative;margin:100px auto;width:200px;height:150pxborder:1px solid black;text-align:center;transition:1s;
background-image: url(http://howdoit.altervista.org/wp-content/uploads/2014/10/Sfondo-wordpress-4.jpg); background-repeat: no-repeat;}
#buttonA:hover{opacity: 0.5);border-radius:30px;}
#buttonA p{position:relative;margin:65px auto;color:black;font-size:20px;text:style;font-style:italic;}
</style>
<a href="#"><div id="buttonA"><p>home</p></div></a>

<style>
#buttonB{position:relative;margin:10px auto;width:200px;height:20px;border:1px solid black;border-radius:20px 20px 0 0;transition:1s;
background-image: url(http://howdoit.altervista.org/wp-content/uploads/2014/10/Sfondo-wordpress-4.jpg); background-repeat: no-repeat;}
#buttonB:hover{height:120px;}
</style>
<a href="#"><div id="buttonB"></div></a>

<style>
#buttonC{position:relative;margin:10px auto;width:200px;height:50px;border:1px solid black;transition:0.5s;
background-image: url(http://howdoit.altervista.org/wp-content/uploads/2014/10/Sfondo-wordpress-4.jpg); background-repeat: no-repeat;}
#buttonC:hover{
-webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);}
</style>
<a href="#"><div id="buttonC"></div></a>

<style>
#buttonE{position:relative;margin:10px auto;width:200px;height:50px;border:1px solid black;transition:0.5s;
background-image: url(http://howdoit.altervista.org/wp-content/uploads/2014/10/Sfondo-wordpress-4.jpg); background-repeat: no-repeat;}
#buttonE:before {
  pointer-events: none;
  content: '';
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -16px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
#buttonE:hover:before{
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  opacity: 1;
}
</style>
<a href="#"><div id="buttonE"></div></a>

<style>
#buttonF{position:relative;margin:10px auto;width:200px;height:50px;border:1px solid black;transition:0.5s;
background-image: url(http://howdoit.altervista.org/wp-content/uploads/2014/10/Sfondo-wordpress-4.jpg); background-repeat: no-repeat;}
#buttonF:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* webkit */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
#buttonF:hover{
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}
#buttonF:hover:before{
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
}
</style>
<a href="#"><div id="buttonF"></div></a>

<style>
#buttonG{position:relative;margin:10px auto;width:200px;height:50px;transition:0.5s;
background-image: url(http://howdoit.altervista.org/wp-content/uploads/2014/10/Sfondo-wordpress-4.jpg); background-repeat: no-repeat;}
#buttonG:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
#buttonG:hover:before{
  width: 25px;
  height: 25px;
}
</style>
<a href="#"><div id="buttonG"></div></a>
,
Similar Posts
Latest Posts from how do it!?