Submit button CSS styling

Question

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?

Answer 1

Replace .button:link, .button:active, .button:visited { with .button:link, .button:active, .button:visited, .button {

You have not added a default style for .button itself.

Answer 2

try this

.button{
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;
}

• Chris Cox: worked for the submit button, but voided my other buttons.
• YI YANG: if you have other buttons share the same class, just follow @Mehul Mohan 's answer. Adding the the other 3 selectors.

Answer 3

See this fiddle

You can select the submit button as input[type="submit"]

input[type="submit"]{
 background: red;
}

Please read more about Attribute Selectors in the docs

OR

You could just use .button to style the submit button as it has the class button

Thus add the below one to your css

.button{
 background: red;
}

Please refer the fiddle

Answer 4

The pseudo-classes :link, :active and :visited are only valid for <a> elements, not for <input> elements. Use just .button for the non-hover state, and it will work.

• Tim Wilkinson: Wait, so valid only for Elements, or not for Elements?
• Sarah Groß: The tags have been filtered, sorry, I'll edit the answer.