CSS Submit button

  • Resolved Nolve

    (@nolve)


    10 years, 5 months ago

    Hi there,

    I wanted my submit button to have another color than blue, so I did some research on CSS and how to use it for CF7.

    So, I added a CSS class in the form:
    <p class=”contactFormSendButton”>[submit “Send”]</p>

    And on the page where the form is placed, I added the following CSS:
    .contactFormSendButton input{
    width: 150px;
    height: 50px;
    background-color: #cc652a;
    font-size: 15px;
    color: #fff;
    }

    .contactFormSendButton input:hover[type=”submit”] {
    background:#4f2a0f;
    cursor:pointer;
    color:#fff;
    }

    But still I’m still seeing a blue color, and I have no clue where it’s coming from or how to get rid of it… Please see here: http://www.easysoftwaredeployment.nl/trynow/

    If you could give me some advise on how to get rid of the blue, I’d be very happy! 🙂

    Thanks in advance!

    https://wordpress.org/plugins/contact-form-7/

Viewing 2 replies - 1 through 2 (of 2 total)
  • davmerit

    (@davmerit)

    10 years, 5 months ago

    The actual look of CF7 forms on your website will depend largely on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements. To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.

    You may start with something like ths

    .wpcf7-form .wpcf7-submit{
     background:#4f2a0f;
    cursor:pointer;
    color:#fff;
}

    See Styling Contact Form 7 Forms for a general explanation of styling CF7 forms using CSS.
    ​

    Thread Starter Nolve

    (@nolve)

    10 years, 5 months ago

    Ah yes, I finally found the other CSS from the theme that was interfering with the custom CSS for CF7. Thx! 🙂

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘CSS Submit button’ is closed to new replies.