button text color

Hello, @wpbetsy

You can define font color for each type of buttons in contact form separately.
To do this, you should open “</>CSS/HTML Code” tab in required contact form settings and add there this code:

#[SHELL_ID] .cfsFieldShell input[type="submit"]{
  color: rgba(255, 255, 0) !important;
}

It defines font color of “Submit” button.
If you want to change font color for “Reset” button, you should use input[type="reset"] instead of input[type="submit"]

I what to change the font color when hover.

If you want to change font color on hover, you should add “hover” attribute like on this example:

#[SHELL_ID] .cfsFieldShell input[type="submit"]:hover{
  color: rgba(255, 255, 0) !important;
}

Where should I add the code? I see
[form_start]
[fields]
[form_end]

You should add it to the CSS part of “</>CSS/HTML Code” tab in the end of default CSS code.
Here is screenshot for you: https://prntscr.com/jshjvc

The code for the whole form that I can see is as below. How to edit it? I want to change the hover font color to white #ffffff

#[SHELL_ID] {
[if bg_type_0 == ‘color’]
background-color: [bg_color_0];
[elseif bg_type_0 == ‘img’]
background-image: url(“[bg_img_0]”);
background-repeat: no-repeat;
background-size: cover;
[endif]
}
#[SHELL_ID] label {
width: 100%;
}
/*Fields shell basic*/
#[SHELL_ID] .cfsFieldShell input:not([type=”checkbox”]):not([type=”radio”]),
#[SHELL_ID] .cfsFieldShell textarea,
#[SHELL_ID] .cfsFieldShell .cfsListSelect,
#[SHELL_ID] .cfsFieldShell .cfsCheck,
#[SHELL_ID] .cfsFieldShell button{
padding: 10px;
width: 100%;
font-size: 18px;
line-height: normal;
[if bg_type_1 == ‘color’]
border: 1px solid {{adjust_opacity(“[bg_color_1]”, 0.1)}};
color: {{adjust_opacity(“[bg_color_1]”, 0.7)}};
background-color: {{adjust_brightness(“[bg_color_1]”, 196)}};
[elseif bg_type_1 == ‘img’]
background-image: url(“[bg_img_1]”);
background-repeat: no-repeat;
background-size: cover;
[endif]
hyphens: none;
border-radius: 0;
margin: 0;
max-width: 100%;
vertical-align: baseline;
display: block;
height: auto;
}
#[SHELL_ID] .cfsFieldShell input[type=”submit”],
#[SHELL_ID] .cfsFieldShell input[type=”reset”],
#[SHELL_ID] .cfsFieldShell input[type=”button”],
#[SHELL_ID] .cfsFieldShell button {
cursor: pointer;
font-weight: 700;
border: 0 none;
color: #fff;
text-transform: uppercase;
-webkit-appearance: none;
}
#[SHELL_ID] .cfsFieldShell input[type=”submit”],
#[SHELL_ID] .cfsFieldShell input[type=”button”],
#[SHELL_ID] .cfsFieldShell button {
[if bg_type_2 == ‘color’]
background-color: [bg_color_2];
background-image: none;
[elseif bg_type_2 == ‘img’]
background-image: url(“[bg_img_2]”);
background-repeat: no-repeat;
background-size: cover;
[endif]
}
#[SHELL_ID] .cfsFieldShell input[type=”submit”]:hover,
#[SHELL_ID] .cfsFieldShell input[type=”button”]:hover,
#[SHELL_ID] .cfsFieldShell button:hover {
[if bg_type_2 == ‘color’]
background-color: {{adjust_opacity(“[bg_color_2]”, 1)}};
[elseif bg_type_2 == ‘img’]
opacity: 1;
[endif]
}
#[SHELL_ID] .cfsFieldShell input[type=”reset”] {
[if bg_type_3 == ‘color’]
background-color: [bg_color_3];
background-image: none;
[elseif bg_type_3 == ‘img’]
background-image: url(“[bg_img_3]”);
background-repeat: no-repeat;
background-size: cover;
[endif]
}
#[SHELL_ID] .cfsFieldShell input[type=”reset”]:hover {
[if bg_type_3 == ‘color’]
background-color: {{adjust_opacity(“[bg_color_3]”, 1)}};
[elseif bg_type_3 == ‘img’]
opacity: 1;
[endif]
}
/* Placeholder text color — selectors need to be separate to work. */
#[SHELL_ID] ::-webkit-input-placeholder {
color: rgba(51, 51, 51, 0.7);
}
#[SHELL_ID] :-moz-placeholder {
color: rgba(51, 51, 51, 0.7);
}
#[SHELL_ID] ::-moz-placeholder {
color: rgba(51, 51, 51, 0.7);
opacity: 1; /* Since FF19 lowers the opacity of the placeholder by default */
}
#[SHELL_ID] :-ms-input-placeholder {
color: rgba(51, 51, 51, 0.7);
}

Where should I place #ffffff please?

Hello, @wpbetsy

If you want to change font color on mouse hover on Submit button, you should open CSS/HTML Code tab in required contact form settings.
Then you should scroll down to the end of default “CSS code” and in the end of it add this new code:

#[SHELL_ID] .cfsFieldShell input[type="submit"]:hover{
  color: #ffffff !important;
}

Here is screenshot of working example for you: https://prntscr.com/jv9hg0