Button styling for contact from 7

Support
#1

Hello,
I would like to style my contact form 7 button exactly as I have the other buttons on my site.
I have made some progress but at present, I am not seeing any background colour styling changes on hover!
See here on this page

.wpcf7-submit {
  margin: 0 auto !important;
    display: block;
    font-family: "Lato",sans-serif!important;
    font-size: 1em!important;
    font-style: normal!important;
    font-weight: 700!important;
    line-height: 1!important;
    text-align: center!important;
    text-transform: uppercase!important;
    color: #024489!important;
border-width: 0 0 3px 0 !important;
border-style: none none solid none !important;
border-color: transparent transparent rgba(0,0,0,.25) transparent !important;
border-radius: .35em !important;
color: rgb(2, 68, 137)!important;
background-color: rgb(4, 206, 218)!important;
box-shadow: 0 .15em 2em 0 rgba(0,0,0,.25)!important;
}
.wpcf7-submit:hover {
background-color:  rgb(2, 185, 196)!important;
color: rgb(2, 68, 137)!important;
box-shadow: 0 .15em 2em 0 rgba(0,0,0,.25)!important;
}

Also, I can see the Lato font styling taking effect but it looks doubled up or like it is thicker…
Any help much appreciated.
Best regards,
Ben

#2

Hi Ben,

Thank you for writing in, please remove the !important statement on both background-color you have,

background-color: rgb(4, 206, 218)!important;
background-color: rgb(2, 185, 196)!important;

That’s a text-shadow you can set that to none.

You can also apply a bit of padding (padding: 1em 2.5em;) to your button to make it bigger.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

#3

Thanks @friech for responding and suggestions.

When removing the !important flag from the background-color, as you recommend, I get the default red coloured button!
So I think the flag is needed to overide the default colour, right?

Ben

#4

Hi Ben,

Yes, you’re right, the flag can overwrite a default styling, but I think your code should able to overwrite the default styling without the flag.

I think the issue is with your :hover styling, I don’t see that code is applied, I only see the normal state.

.wpcf7-submit:hover {
background-color:  rgb(2, 185, 196)!important;
color: rgb(2, 68, 137)!important;
box-shadow: 0 .15em 2em 0 rgba(0,0,0,.25)!important;
}

Can you clarify where did you place that? I am not seeing it on your page-source nor on the child theme’s style.css

Can you add this to your Theme Options > CSS instead?

input.wpcf7-submit:hover {
    background-color: rgb(2,185,196);
}

Let us know how it goes,
Cheers!

#5

Thanks again @friech,

That seems to have helped. I am adding styles to CSS on that element. I didn’t have in word “input” in front of .wpcf7-submit:hover

Thanks very much for your help with this.
Cheers,
Ben

#6

We are delighted to assist you with this.

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.