0

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?

4 Answers 4

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.

0
1

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;
}
2
  • worked for the submit button, but voided my other buttons.
    – Chris Cox
    Commented Mar 18, 2016 at 16:12
  • if you have other buttons share the same class, just follow @Mehul Mohan 's answer. Adding the the other 3 selectors.
    – YI YANG
    Commented Mar 18, 2016 at 16:18
0

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

0

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.

2
  • Wait, so valid only for Elements, or not for Elements? Commented Mar 18, 2016 at 15:53
  • 1
    The tags have been filtered, sorry, I'll edit the answer. Commented Mar 18, 2016 at 15:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.