Como hacer un botón con gradiente en CSS

By | 2010/10/13

Estoy desarrollando un website en el que quiero tener botones con gradiente y esquinas redondeadas pero sin tener que estar creando imagenes para cada uno. Por esto investigué un poco y encontre el código CSS que me permite realizarlo.

.button
{
behavior: url(border-radius.htc);
border-top: 1px solid #f7d186;
background: #e08619;
background: -webkit-gradient(linear, left top, left bottom, from(#e86823), to(#e08619));
background: -moz-linear-gradient(top, #e86823, #e08619);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e86823, endColorstr=#e08619);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#e86823, endColorstr=#FEB764)”;
padding: 5.5px 11px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-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: white;
font-size: 22px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
text-align:center ;
}
.button:hover {
border-top-color: #de7d07;
background: #de7d07;
color: #404040;
}
.button:active {
border-top-color: #ffffff;
background: #ffffff;
}

El archivo .htc lo puedes encontrar aqui

Category: CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This blog is kept spam free by WP-SpamFree.