Needing to make my submit button to style like other buttons on the website. Here is the html code:
<p><input type='submit' value='Search' class='button'></p>
And the css
.button:link, .button:active, .button:visited {
background: #000000;
color: #ffffff;
text-decoration: none;
font-size: 12px;
padding: 5px 15px 5px 15px;
border: 0px;
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.button:hover {
background: #333333;
background-image: -webkit-linear-gradient(top, #333333, #000000);
background-image: -moz-linear-gradient(top, #333333, #000000);
background-image: -ms-linear-gradient(top, #333333, #000000);
background-image: -o-linear-gradient(top, #333333, #000000);
background-image: linear-gradient(to bottom, #333333, #000000);
color: #ffffff;
font-size: 12px;
padding: 5px 15px 5px 15px;
border: 0px;
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
The hover effect works fine. But the normal grey box is there when not hovering. Any ideas?