Gradient Background for form button type
Hi,
Is it possible to apply Gradient Background to a button element?
also is it possible to get a different gradient on hover? I basically don't want to use a background image.
Code:
.btn_holder button{
behavior: url(/dir_path/PIE.htc);
}
.btn_holder{
padding:2px;
background:#cf1f29;
}
.btn_holder button{
display:block;
text-align:center;
border:1px solid #fbc8b3;
padding:5px 10px;
text-transform:uppercase;
color:#fff;
background: -moz-linear-gradient(top, #d0171e 0, #8f0406 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#d0171e), color-stop(100%,#8f0406));
-pie-background: linear-gradient(#d0171e, #8f0406);
}
.btn_holder button:hover{
background: -moz-linear-gradient(top, #f81922 0, #c3050b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#f81922), color-stop(100%,#c3050b));
-pie-background: linear-gradient(#f81922, #c3050b);
cursor:pointer;
}
This has an issue with ALL IE versions (I have not checked IE9 Beta).
Thanks in advance
Forums
)..