Home>Support>Change color of submit button in Contact form 7

Change color of submit button in Contact form 7

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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 4 years, 11 months ago Andrew Misplon Hi, I Work Here

    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. 4 years, 11 months ago Henrik

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

  3. 4 years, 11 months ago Andrew Misplon Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More