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.