[Andreas BjerveParticipant]

Hi,

I´d like a submit/send button somewhat like this one: https://snag.gy/hxn4Dq.jpg

Can you help me with this?

(andreasbjerve.com)

[Andreas BjerveParticipant]

…whose button background turns black and “send” text turns white upon hover…

[Andreas BjerveParticipant]

I found out I can get most of these effects through the appearance menu. I just want control over the border (width – height) of the button and the fill hover color…

Thanks!

[LelyModerator]

Hello Andreas,

I can’t see your site because it is under construction. Although we’re glad you figured out other effects.

For regular buttons we can add custom class on the button class field. For example, add like custom-btn. Then on Appearance > Customize > Custom > Edit Global CSS add the following:

.custom-btn{
  border: 2px solid red; /*2px is border width and red is border color*/
  padding: 20px 30px;  /*20px is top and bottom padding. It will increase button height. 30px is left and right padding*/
}

.custom-btn:hover{
  background-color: red;  /*Change red to your preferred background color*/
}

If this doesn’t work as expected, please do share your site credentials so we can check further.

Cheers!

[Andreas BjerveParticipant]

Thanks! This might work – now I want this code applied to a Contact Form 7 “send” button, so where do I target that button? In the Contact Form 7 settings?

[ThaiModerator]

Hi There,

Please try with this CSS:

.input.wpcf7-form-control.wpcf7-submit {
  border: 2px solid red; /*2px is border width and red is border color*/
  padding: 20px 30px;  /*20px is top and bottom padding. It will increase button height. 30px is left and right padding*/
}

.input.wpcf7-form-control.wpcf7-submit:hover{
  background-color: red;  /*Change red to your preferred background color*/
}

Hope it helps 🙂

[Andreas BjerveParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please update previous code to :

input.wpcf7-form-control.wpcf7-submit {
  border: 2px solid #000; /*2px is border width and red is border color*/
  padding: 10px 30px;  /*10px is top and bottom padding. It will increase button height. 30px is left and right padding*/
  float:left;
  border-radius:0;
}

input.wpcf7-form-control.wpcf7-submit:hover{
  background-color: red;  /*Change red to your preferred background color*/
}

Hope it helps.

[Andreas BjerveParticipant]

Perfect! Thanks:)

Just a side question; I´ve done some CSS customizing on the various pages of the site now, will they be affected by future updates? Should I have done them in the child theme? And in that case, how does one transfer current changes over to child theme (and preview them etc.)? I have one but havent used it yet, as I´m pretty new to this.

Thanks!

[ChristianModerator]

If you’ve placed your CSS in the Customizer or Cornerstone Custom CSS, they won’t get overwritten. Only the template files will be overwritten and that includes style.css

Thanks.

[Andreas BjerveParticipant]

Ah, I see. Thanks a lot!

[ChristianModerator]

You’re welcome.

[Author]

Posts