Change submitbutton cf7

[zero_to_one]

hey there,
I’d like to change the submit button of my cf7. What is the best way to to this, should I create a bottom of my liking as a global block?
how do I implement it?
thanks for your help!

Startseite

[mldarshana]

Hi There @zerotoone.de

Thanks for writing in! You can assign a unique CSS class to your contact form 7 button as you can see here on this example (https://contactform7.com/submit-button/). Then you can add your custom CSS rules to target your button into your X -> Theme Options -> CSS area.

Please follow similar example CSS on our knowledge base section here (https://theme.co/apex/forum/t/customizations-implementing-additional-button-colors/206).

Hope that helps.

[zero_to_one]

Whar did I do wrong? added the class to the form in cf7, called submit and also added this custom css

[button class="submit" href="#" title="Senden"] .x-btn.submit{ color: #ffffff; border-color: #ac1100; background-color: #ff2a13; } .x-btn.submit:hover{ color: #ffffff; border-color: #600900; background-color: #ef2201; }

but nothing changed on https://siyuanyu.com/

[basanta]

Hi There,

Thanks for the info!

The parent class is not .x-btn for contact form buttons.

Please use this CSS instead of the above.

.wpcf7-form .submit{
color: #ffffff;
border-color: #ac1100;
background-color: #ff2a13;
}
.wpcf7-form .submit:hover{
color: #ffffff;
border-color: #600900;
background-color: #ef2201;
}

Hope this works!
Thanks

[zero_to_one]

thank you, but this did not help, still the old button

[Prasant]

Hello @zerotoone.de,

Thanks for updating the thread.

Please replace previous code with following:

.wpcf7-form .submit{color: #ffffff !important;border-color: #171817 !important;background-color: #171817 !important;box-shadow: 0 0.25em 0 0 #171817, 0 4px 9px rgba(0,0,0,0.75);}
.wpcf7-form .submit:hover{color: #420d0d !important;border-color: #6f6f6f !important;background-color: #6f6f6f !important;box-shadow: 0 0.25em 0 0 #6f6f6f, 0 4px 9px rgba(0,0,0,0.75);}

Please change colors as per requirement.

Above changes are done using custom CSS. If you would like to explore CSS, please take a look at following resource:

https://www.w3schools.com/css/

Thanks.