I'm pretty new to css, so please go easy on me :-)
I am trying to flip the gradient on a button when it's hovered on, but the hover function is not working when I test.
<head>
<style type="text/css">
.button_new{
border:1px solid #fab32f;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size:12px;
font-family: arial, helvetica, sans-serif;
padding: 0px 8px;
text-decoration: none;
display: inline-block;
color: #a60201;
-webkit-font-smoothing: antialiased;
background-color: #fab32f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fccd78), to(#f8b030);
background-image: -webkit-linear-gradient(top, #fccd78, #f8b030);
background-image: -moz-linear-gradient(top, #fccd78, #f8b030);
background-image: -ms-linear-gradient(top, #fccd78, #f8b030);
background-image: -o-linear-gradient(top, #fccd78, #f8b030);
background-image: linear-gradient(to bottom, #fccd78, #f8b030);
}
.button_new:hover{
border: 1px solid #ffa700;
background-color: #ffa700;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f8b030), to(#fccd78));
background-image: -webkit-linear-gradient(top, #f8b030, #fccd78);
background-image: -moz-linear-gradient(top, #f8b030, #fccd78);
background-image: -ms-linear-gradient(top, #f8b030, #fccd78);
background-image: -o-linear-gradient(top, #f8b030, #fccd78);
background-image: linear-gradient(to bottom, #f8b030, #fccd78);
}
</style></head>
<body>
<a class="button_new" href="#">Posters <span style="color:#fff; font-weight:bold; font-size:14px;">></span></a>
</body>
Thanks in advance for your help!
Your syntax for -webkit-gradient is incorrect. Remove these two lines and it works :
background-image: -webkit-gradient(linear, left top, left bottom, from(#fccd78), to(#f8b030);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f8b030), to(#fccd78));