Change the background submit button color

Hi mefly,

I apologize for the length of this response, but I wanted to give you some options ?? I also wasn’t clear on whether or not you wanted to change all of the buttons on your site, or just the ones on the form. I’m starting with the CSS to change all of the buttons on your site, but if you only want to change the buttons on that page, or in just your Jazzy forms, let me know and I’ll give you the CSS for that instead.

If your theme allows you to enter custom CSS, add this; if not, make a Child Theme or use a custom CSS plugin. This CSS will change just the background color to match your site’s footer:

button, .button, input[type="reset"], input[type="button"], input[type="submit"] {
	background:#333333;
}

I noticed that your buttons have a red border and shadow as well, if you want to remove all of the red, this would be the CSS to use:

button, .button, input[type="reset"], input[type="button"], input[type="submit"] {
	background:#333333;
	border-color: #000;
	box-shadow: 0 0 4px 0 #b3b3b3;
}

If you want to change the border around the buttons that appears when you hover over them to match the red line at the top of your footer, use this CSS:

button:hover, .button:hover, input[type="reset"]:hover, input[type="button"]:hover, input[type="submit"]:hover {
	border-color: #b81005;
}

Hope this helps!

Christi

Thanks Christy, I may be able to use this info too. But for now I was just wanting to change the buttons on my jazzy forms. There is two or three places to do this and I cant seem to get it to work. I was thinking of using this button generator then putting it in the custom css in jazzy form.
css3buttongenerator
Mark

Hi Mark,

You can use the button generator, but you would need to change the class of the button to the class used on your site (e.g. .button instead of .btn). I went ahead and did a test instal of the Jazzy Forms plugin, and it does do a decent job of letting you customize the buttons for just the forms. I only see one place in the Jazzy Forms plugin to change the button styles, and that is on the Appearance tab of the form you want to change.

Try putting your custom CSS in that box and see if that changes the button styles. If it doesn’t, leave the style in that box, and update this post. I can take a look at it and see if the CSS needs to be adjusted a bit.

Thanks!

Christi

The custom CSS is there but it’s not doing anything. Here is the updated page.

I wounder if there is something that is overriding our custom CSS?

Mark

Hi Max,

We’re making progress! I’m including some screen shots below to help you navigate the fields in Jazzy Forms where you will want to change things to get your custom CSS working for your form. In the Appearance section of your Reset button, change this to just the word “button” (without the quotes). Here’s a screen shot of how that should look:

https://puu.sh/dHsmx/f0ea206c84.png

Next, click on the Appearance tab (between Validation and Email):

https://puu.sh/dHsNX/3b48d329ab.png

On the Appearance tab, place your custom CSS, with a slight modification as follows:

https://puu.sh/dHsUK/1a573affc9.png

.button input {
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;
	font-family: Arial;
	color: #ffffff;
	font-size: 15px;
	background: #008000;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
}
.button input:hover {
	background: #008000;
	background-image: -webkit-linear-gradient(top, #008000, #00ff00);
	background-image: -moz-linear-gradient(top, #008000, #00ff00);
	background-image: -ms-linear-gradient(top, #008000, #00ff00);
	background-image: -o-linear-gradient(top, #008000, #00ff00);
	background-image: linear-gradient(to bottom, #008000, #00ff00);
	text-decoration: none;
}

Click the Save button and your custom CSS should now show up on your page.

Thanks!

Christi

Very clear and simple instructions. This was easy to follow and the button is there but there is still problems with the area around the button etc.. If you want to look at it again feel free but maybe we should stop before we get to deep into programing!

Thanks,

Mark

Hi Mark,

Sorry for the delay in my response. I think this should fix the issue:

.button {
	background:none;
	box-shadow:none;
}

.button:hover {
	border:none;
	box-shadow:none;
}

You may want to adjust the top and bottom padding on .button input as well to position the text on the button a bit better, or add this to the .button code I just provided above:

height: auto;

Let’s see how that looks!

Christi