Make style of buttons common through site

[claywebdev]

Hi there,

I am having difficulties making all the buttons common in my site.

I have two pages containing buttons
Contact Page
http://keighleyclay.com/contact/
About page
http://keighleyclay.com/about/

The button in the about page is created using the elements Button icon in pro x-theme. And i think it looks great and I would like all the buttons to look like this.

The button in the Contact page is being generated from the contact form 7 plugin, and is being styled by the customiser buttons and they appear different.

A work-around or fix would be really helpful.

Thanks for your help
Chris

[ruenel]

Hello Chris,

It good to hear from you. To resolve your issue, please do the following:
1.) Please edit your contact form and replace your contact form 7 submit shortcode.
Please use this:

[submit  class:x-anchor class:x-anchor-button "Send"]

2.) And then please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL CSS

input.wpcf7-form-control.wpcf7-submit {
    border-radius: 0.35em;
    font-size: 1em;
    background-color: rgba(255,255,255,1);
    box-shadow: 0em 0.15em 0.65em 0em;
}

Please let us know if this works out for you.

[claywebdev]

Hi Rue,

Thank you for the info. I definitely have control of the button now. I just need to change the hover effect now.

Do you know the CSS to access the hover of the wpcf7 button?

Thanks

Chris

[christian]

Hey Chris,

Add :hover to the selector like this input.wpcf7-form-control.wpcf7-submit:hover. For more details, please see this article.

Thanks.

[claywebdev]

Hi Christian,

Thanks for the info and the :hover lets me control the css of the button. However, it still seems to be being doing an action (changing font color and box-shadow) when I add the following CSS
The example is herehttp://keighleyclay.com/contact/
.wpcf7-form-control.wpcf7-submit:hover {
border-radius: none !important;
font-size: 1em;
background-color: rgba(255,255,255,1)!important;
box-shadow: 0em 0.15em 0.65em 0em !important;
}

[christian]

In that case, please remove all the CSS given previously and design the button in Appearance > Theme Options > Buttons. Further enhancing the code will be getting into custom development which is outside the scope of our support because the button designer should be the one to be used for sitewide button design.

Thanks.

[claywebdev]

Hi Christian,

Thanks for the help. You have been really helpful.

I think my problem is that contact from 7 is pulling through the classic x-button, but I want to pull through the pro version.

Do you know if this possible?

Pro buttons are seen here:
http://keighleyclay.com/about/

While the classic button is in the contact page here
http://keighleyclay.com/contact/

Thanks again for your support

Chris

[rad]

Hi there,

The form uses different button than the theme’s button and the form button has it’s own styling and the only way to achieve that is overriding those CSS.

If the issue is just the hover, then please add this CSS too.

.x-btn:hover, .button:hover, [type="submit"]:hover {
    color: hsl(0,0%,0%);
    border-color: #e6e6e6;
}

There will be no hover effect anymore.

Thanks!

[claywebdev]

Hi Rad,

Thanks for this. I’ll try it later today and let you know how it goes.

Chris

[christian]

Hey Chris,

The form’s button and all the generic buttons will get its design from the Theme Options or Customizer. Please see this screen recording to design the button.

It will not inherit the design of your Pro button. V2 elements including the new Pro button are currently unique or cannot be applied globally.

If you wish to continue with CSS, please follow the previous advice given in this thread.

Thanks.

[christopher]

Hi there, here I am another support staff and I thought I delve in for further elaboration.

The settings that you see in the Pro > Launch > Theme Options > Button are available generally for different places of the theme which the button is generated, including the contact form 7 send button.

You use the Button element to create the button you like and the stuff there are not available globally and the button is only available in the builder as you added on the about page.

Now that you know you can not use the same styling of the button element for the contact button, there is a manual way to somehow have the same functionality using the custom CSS code for your contact button.

I suggest that you use this CSS code to have the button of contact be like the button of the about page both in normal and hover mode. You will need to add the code below to Pro > Launch > Theme Options > CSS: (You will need to replace the code below with whatever code we suggested before)

input.wpcf7-form-control.wpcf7-submit {
    border-radius: 0.35em;
    font-size: 1em;
    background-color: rgba(255,255,255,1);
    box-shadow: 0em 0.15em 0.65em 0em rgba(0,0,0,0.25) !important;
    text-shadow: none;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

input.wpcf7-form-control.wpcf7-submit:hover {
    border-radius: 0.35em;
    font-size: 1em;
    background-color: rgba(255,255,255,1);
    box-shadow: 0em 0.15em 0.65em 0em rgba(0,0,0,0.25) !important;
    text-shadow: none;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(255,255,255,1);
    box-shadow: 0em 0.15em 0.65em 0em rgba(0,0,0,0.25);
    color: rgba(0,0,0,0.5);
}

Hope I could describe the case completely. Thank you.

[claywebdev]

Christopher,

This is awesome. The button looks perfect, exactly how I want it to look.

Thank you for following up on the thread and apologies for not getting back to you sooner. I am made up.

All the best

Chris

[Joao]

Glad to hear Chris,

Cheers!