Global Buttons Styles not working on contact form

Hello,

I’m trying to get my buttons to match. The contact forms will not let me edit them directly and I can’t figure out where to put the CSS to edit these buttons.

My homepage link is: https://gregoryshepard.com

The learn more and view articles button is what I am trying to get these large clunky drop shadowed contact form buttons to match. Help please? None of the support articles are helping.

Hi There,

Thanks for writing in!

To add box-shadow to the contact form buttons or any other buttons please add this CSS to your X->Theme Option -> Global CSS

input[type="submit"] {
box-shadow: 0em 0.15em 0.65em 0em rgba(0,0,0,0.25);
}

Hope this helps!
Thanks

I’m actually trying to take the shadows off and make the buttons the small pill size buttons like the global style button that works in the theme. So I would like all my buttons to look like “View Articles” button on the homepage.

Hi There,

Sorry for the confusion!

Please use this css instead of the previous one.

   .x-anchor, input[type="submit"] {
   box-shadow: none !important;
   padding: 0.575em 2.5em 0.575em 2.5em;
   font-size: 1em;
   text-shadow: none !important;
}

Hope this helps!

Thanks

Thank you very much. That did help, but it made my other buttons larger? Now my contact form buttons are correct but the original global style buttons became larger?

Hi There,

Thanks for the confirmation!

Please add this CSS.

.x-anchor .x-anchor-content {
 padding: 0px !important;
}
.x-anchor .x-anchor-text {
 margin: 0px !important;
}

Hope this helps!

Thanks

1 Like

Yes this works! Thank you very much for your very quick help!

you are most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.