Hi there Brabuhr,
I took a look at your site for you and the css code that will help you is this
input[type=”submit”] {
background: red;
}
input[type=”submit”]:hover{
background: blue;
}
This code will change all submit buttons on your site, If you wish to change a specific button you can simply put the class the submit button is under right in front of this code and it will work for that button only. You can change the background to anything you wish, be it an image or a color, i simply put red and blue so that you can see the code in action. As a friendly reminder always make sure that all css changes you make to your theme are done through a child theme or a plugin such as Jetpack. If you don’t know how to make a child theme simply go here
http://codex.wordpress.org/Child_Themes
The WordPress codex does a pretty good job explaining how to create one. Hope this helps. If you have any further questions don’t hesitate to ask.
Wolf’s Brain (^_^)
Hi Wolf’s Brain,
Thanks for the quick reply. Unfortunately I have code similar to that in my stylesheet already (using contact form 7):
.wpcf7-f890-p788-o1, input[type=submit] {
background: #3498db;
border-radius: 10px;
font-family: Lato, sans serif;
font-weight: 700;
color: #fff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-transform: uppercase;
} '
But it doesn’t override the default gradient that’s being applied somewhere. It’s in some random inline stylesheet that I can’t figure out where is. This is it:
a:link, a:visited,
.primary-color,
.menu-main .current_page_ancestor > a,
.menu-main .current-menu-item > a { color:#387f6f; }
.primary-color-bg,
.menu-portfolio .current-cat a { background-color:#387f6f; }
.button-default, .button-default:link, .button-default:visited, input[type=submit] { background:#387f6f;
background:-moz-linear-gradient(top, #387f6f 0%, #064d3d 100%);
background:-webkit-linear-gradient(top, #387f6f 0%,#064d3d 100%);
background:linear-gradient(to bottom, #387f6f 0%,#064d3d 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#387f6f', endColorstr='#064d3d',GradientType=0 );
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.5); border-color:#064d3d; }
.button-default:hover, input[type=submit]:hover { background:#387f6f; }
Thanks for your help!
Hi again Brabuhr
If the code still isn’t working and is being overwritten you can always try to use !important. Such as:
input[type="submit"]:hover {
background: blue !important;
}
That should overwrite any other css that might be affecting it.
