Sigueme por RSS! RSS

Botones CSS3 personalizados

 
CSS3 Button Maker es un generador de botones on-line que usa el estándar CSS3, se puede personalizar para conseguir sombras, esquinas redondeadas, gradientes, todo completamente selectivo.

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
.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

0 comentarios: Suscribete a los comentarios por RSS

Publicar un comentario

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