[ZerotoOneParticipant]

hey there,
I’d like to change the style of my contact form 7 button.
my site is http://www.zerotoone.de and it would be perfect if I could use classes for this since I already styled a button for this purpose “custom-btn-grey”. thank you for the help! 🙂

[DarshanaModerator]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. Could you please explain what are the changes that you require for the button, we’ll be happy to provide you with a response once we have a better understanding of the situation.

[ZerotoOneParticipant]

http://prntscr.com/ckk5ad
and I’d like to use my class “custom-btn-grey” to style the contact formn’s button

[ThaiModerator]

Hi There,

Please find this CSS:

a.x-btn.custom-btn-grey {
    display: inline-block;
    font-size: 10px;
    font-family: "Montserrat";
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
    padding: 15px 40px;
    -moz-border-radius: 44px;
    -webkit-border-radius: 44px;
    border-radius: 44px;
    -moz-box-shadow: 0px 3px 6px 1px transparent;
    -webkit-box-shadow: 0px 3px 6px 1px transparent;
    box-shadow: 0px 3px 6px 1px transparent;
    -moz-transform: perspective(0);
    -ms-transform: perspective(0);
    -webkit-transform: perspective(0);
    transform: perspective(0);
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    -webkit-transition: all 0.7s ease;
    -webkit-transition-delay: 0s;
    transition: all 0.7s ease 0s;
    text-shadow: none;
    border: none;
    color: #2e2e2e;
    background: #f2f2f2;
}
a.x-btn.custom-btn-grey:hover {
    -moz-box-shadow: 0px 4px 9px 1px rgba(46,46,46,0.3);
    -webkit-box-shadow: 0px 4px 9px 1px rgba(46,46,46,0.3);
    box-shadow: 0px 4px 9px 1px rgba(46,46,46,0.3);
    -moz-transform: perspective(400px);
    -ms-transform: perspective(400px);
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    color: #fff;
    background: #2e2e2e;
}

And change to this:

a.x-btn.custom-btn-grey,
input.wpcf7-form-control.wpcf7-submit {
    display: inline-block;
    font-size: 10px;
    font-family: "Montserrat";
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
    padding: 15px 40px;
    -moz-border-radius: 44px;
    -webkit-border-radius: 44px;
    border-radius: 44px;
    -moz-box-shadow: 0px 3px 6px 1px transparent;
    -webkit-box-shadow: 0px 3px 6px 1px transparent;
    box-shadow: 0px 3px 6px 1px transparent;
    -moz-transform: perspective(0);
    -ms-transform: perspective(0);
    -webkit-transform: perspective(0);
    transform: perspective(0);
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    -webkit-transition: all 0.7s ease;
    -webkit-transition-delay: 0s;
    transition: all 0.7s ease 0s;
    text-shadow: none;
    border: none;
    color: #2e2e2e;
    background: #f2f2f2;
}
a.x-btn.custom-btn-grey:hover,
input.wpcf7-form-control.wpcf7-submit:hover {
    -moz-box-shadow: 0px 4px 9px 1px rgba(46,46,46,0.3);
    -webkit-box-shadow: 0px 4px 9px 1px rgba(46,46,46,0.3);
    box-shadow: 0px 4px 9px 1px rgba(46,46,46,0.3);
    -moz-transform: perspective(400px);
    -ms-transform: perspective(400px);
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    color: #fff;
    background: #2e2e2e;
}

Hope it helps 🙂

[ZerotoOneParticipant]

thank you thats perfect!

[JoaoModerator]

Glad to hear we managed to help,

Joao

[Author]

Posts