Agregan este codigo en un archivo de estilos .css
[color=#000000][color=#000000]/* botones css */
.button{
background:url('images/botones.gif') repeat-x;
background-color:#1769BA;
border:1px solid #173977;
cursor:pointer;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:5px 5px;
min-width:100px;
padding:8px 10px;
text-shadow:0 1px 1px #000000;
-moz-box-shadow:1px 1px 1px #A7A7A7;
-moz-border-radius:5px;
-webkit-box-shadow:1px 1px 1px #A7A7A7;
-webkit-border-radius:5px;
}
a.button{color:#FFF;}
a.button:hover{text-decoration:none;}
.button:hover{
-moz-box-shadow:0px 0px 10px #5298f0;
-webkit-box-shadow:0px 0px 10px #5298f0;
}
.button:active{
background:#2b79cc;
font-weight:bold;
color:#0B243B;
text-shadow:1px 1px 1px #4f96ed;
-moz-box-shadow:none!important;
}
input.button:disabled{
opacity:0.5;
filter:alpha(opacity=50);
}
/*Botones 2.0 Colores*/
/*Rojo*/
.button.rojo{
background:url('images/botones.gif') 0 -45px repeat-x;
background-color:#1769BA;
border-color:#530e0e;
}
.button.rojo:hover{
-moz-box-shadow:0px 0px 10px #FD9393;
-webkit-box-shadow:0px 0px 10px #FD9393;
}
.button.rojo:active{ background:#bf1e1e; color:#610B0B; text-shadow:1px 1px 1px #f06161;}
/*Verde*/
.button.verde{
background:url('images/botones.gif') 0 -90px repeat-x;
background-color:#2f9a12;
border-color:#0d5020;
}
.button.verde:hover{
-moz-box-shadow:0px 0px 10px #64e34b;
-webkit-box-shadow:0px 0px 10px #64e34b;
}
.button.verde:active{ background:#2f9a12; color:#0B3B0B; text-shadow:1px 1px 1px #61df48;}
/*Amarillo*/
.button.amarillo{
background:url('images/botones.gif') 0 -135px repeat-x;
background-color:#b9ba18;
border-color:#565c13;
color:#000;
text-shadow:1px 1px 1px #FFF;
}
.button.amarillo:hover{
-moz-box-shadow:0px 0px 10px #b9ba18;
-webkit-box-shadow:0px 0px 10px #b9ba18;
}
.button.amarillo:active{ font-weight:normal; background:#b9ba18; color:#393B0B; text-shadow:1px 1px 1px #f0ef61;}
/*Gris*/
.button.gris{
background:url('images/botones.gif') 0 -180px repeat-x;
background-color:#a5a4a4;
color:#000;
text-shadow:1px 1px 1px #FFF;
border-color:#61615f;
}
.button.gris:hover{
-moz-box-shadow:0px 0px 10px #a4a4a3;
-webkit-box-shadow:0px 0px 10px #a4a4a3;
}
.button.gris:active{ font-weight:normal; background:#a5a4a4; color:#2E2E2E; text-shadow:1px 1px 1px #dcdbda;}
/*Naranja*/
.button.naranja{
background:url('images/botones.gif') 0 -225px repeat-x;
background-color:#c57617;
border-color:#855614;
}
.button.naranja:hover{
-moz-box-shadow:0px 0px 12px #d69335;
-webkit-box-shadow:0px 0px 12px #d69335;
}
.button.naranja:active{ background:#c87c1d; color:#61380B; text-shadow:1px 1px 1px #efc063;}
/* botones css */[/color]
[/color]
Ahora solamente para llamarlos hacen esto:
[color=#000000]Azul: <input class="button" value="Normal" type="submit">
Rojo: <input class="button rojo" value="Rojo" type="submit">
Verde: <input class="button verde" value="Verde" type="submit">
Amarillo: <input class="button amarillo" value="Amarillo" type="submit">
Gris: <input class="button gris" value="Gris" type="submit">
Naranja: <input class="button naranja" value="Naranja" type="submit">[/color]
