Podemos ir modificando las opciones y ver el resultado al instante. Una vez terminas de personalizar debes dar clic sobre el botón de muestra y obtendrás el código CSS respectivo, lo demás, sera agregarlo a tu sitio.
Ejemplo de CSS generado
Demo: http://css-tricks.com/examples/ButtonMaker
Descarga: http://css-tricks.com/examples/ButtonMaker.zip
.button {
border-top: 1px solid #f2c84b;
background: #363436;
background: -webkit-gradient(linear, left top, left bottom, from(#7d7b7d), to(#363436));
background: -moz-linear-gradient(top, #7d7b7d, #363436);
padding: 4px 8px;
-webkit-border-radius: 21px;
-moz-border-radius: 21px;
border-radius: 21px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 11px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #4a4a4a;
background: #4a4a4a;
color: #c1940b;
}
.button:active {
border-top-color: #c1940b;
background: #c1940b;
}
Demo: http://css-tricks.com/examples/ButtonMaker
Descarga: http://css-tricks.com/examples/ButtonMaker.zip

- Los comentarios están siendo moderados y serán publicados en la brevedad posible.