This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Change color of submit button in Contact form 7

Resolved 3 replies premiumthemetheme-vantage
Henrik
11 years ago · Last reply by Andrew Misplon 11 years ago

Hi,
I added a contact form with the Contact Form 7 plugin on my Vantage site. The submit button is grey and I wonder how I can change the color of the bottom to blue, preferably change it to the same buttons that I use on my page withSiteorigin button widget.

I have tried adding custom css according to tips on the web but it doesn’t work…:(

Thanks,
Henrik

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Andrew Misplon Staff 11 years, 3 months ago

    Hi Henrik

    The list of properties for this is pretty extensive. If you’re willing to dive in try the following under Appearance > Custom CSS and adjust as required:

    /* Vantage Contact Form 7 Submit Button */
.wpcf7 input[type="submit"] {
padding: 12px 20px;
border-top: solid 1px #d2d2d2;
border-left: solid 1px #c3c3c3;
border-right: solid 1px #c3c3c3;
border-bottom: solid 1px #9f9f9f;
background: #ffffff;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dfdfdf), color-stop(1, #ffffff));
background: -ms-linear-gradient(bottom, #dfdfdf, #ffffff);
background: -moz-linear-gradient(center bottom, #dfdfdf 0%, #ffffff 100%);
background: -o-linear-gradient(#ffffff, #dfdfdf);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf', GradientType=0);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 12px;
font-weight: bold;
color: #646464;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5);
width: auto;
text-decoration: none;
cursor: pointer;
-webkit-appearance: button;
line-height: 1;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
  2. Henrik 11 years, 3 months ago

    Great! Worked perfect!
    Thanks a lot for a great theme and excellent support!

  3. Andrew Misplon Staff 11 years, 3 months ago

    Glad you were able to make progress there. Thanks for the positive feedback! All the best with your project.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread