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?

mehulmpt · Accepted Answer · 2016-03-18 15:47:33Z

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.

answered Mar 18, 2016 at 15:47

mehulmpt

16.7k13 gold badges54 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

YI YANG · Accepted Answer · 2016-03-18 15:49:41Z

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;
}

answered Mar 18, 2016 at 15:49

YI YANG

1333 silver badges15 bronze badges

2 Comments

Chris Cox Over a year ago

worked for the submit button, but voided my other buttons.

YI YANG Over a year ago

if you have other buttons share the same class, just follow @Mehul Mohan 's answer. Adding the the other 3 selectors.

Lal · Accepted Answer · 2016-03-18 15:47:54Z

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

answered Mar 18, 2016 at 15:47

Lal

14.9k4 gold badges50 silver badges76 bronze badges

Comments

Sarah Groß · Accepted Answer · 2016-03-18 15:54:58Z

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.

edited Mar 18, 2016 at 15:54

answered Mar 18, 2016 at 15:47

Sarah Groß

10.9k4 gold badges30 silver badges53 bronze badges

2 Comments

Tim Wilkinson Over a year ago

Wait, so valid only for Elements, or not for Elements?

Sarah Groß Over a year ago

The tags have been filtered, sorry, I'll edit the answer.

Collectives™ on Stack Overflow

Submit button CSS styling

4 Answers 4

Comments

2 Comments

See this fiddle

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

See this fiddle

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related