Global Buttons Styles not working on contact form

Support
#1

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.

#2

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

#3

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.

#4

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

#5

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?

#6

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
#7

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

#8

you are most welcome!

#9

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