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
Started · Latest reply by Andrew Misplon

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

    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

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

  3. Andrew Misplon Staff

    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