Autore: Fabio Di Matteo
Ultima revisione: 28/11/2012

Tramite il lunguaggio di formattazione css è possibile creare dei bottoni perfettamente formattati con tanto di comportamenti hover, active. Ecco il risultato:

Questo codice va tra i tag <style></style> oppure in un foglio di stile.

.mybutton {
	/*Definisce l'ombra del bottone (tag per mozilla, webkit e tutti gli altri)*/
	-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
 
        /*La sfumatura della superfice(tag per mozilla, webkit e IE)*/
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
	background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
 
        background-color:#79bbff; /*colore base dello sfondo*/
 
        /*Bordi arrotondati (tag per mozilla, webkit e tutti gli altri)*/
        -moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
 
        border:1px solid #84bbf3;
	display:inline-block;
	color:#ffffff;
 
        /*Testo*/
        font-family:Comic Sans MS;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #528ecc;
}.mybutton:hover {
	/*La sfumatura della superfice(tag per mozilla, webkit e IE)*/
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
	background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
	background-color:#378de5; /*colore di sfondo base*/
}.mybutton:active {
	position:relative;
	top:1px;
}

In .mybutton:hover vengono messe le regole per quando il puntatore del mouse è sopra l'elemento e in .mybutton:active quando si è fatto click sull'elemento.

Per collocare il bottone basta inserire un <a> nel body nel seguente modo:

<a href="http://www.freemedilab.org/pob" target="_BLANK" class="mybutton"> Vai al mio blog! </a>