====== Creare bottoni stilizzati con css ====== 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: ===== Il codice ===== Questo codice va tra i tag '' '' 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 '''' nel body nel seguente modo:

 Vai al mio blog!