X-btn padding problem on submit buttons

Support
#1

whenever I add the class x-btn to a button or a div or probably any other element than an anchor, there is a problem with the amount of padding when hovering over the element. It actually grows in size. I don’t want to start overriding the theme’s css in case it messes anything else up.

How should I apply the x-btn class to elements other than anchors? In this particular case, I have a button type submit that I need to style.

#2

it also happens when I remove the x-btn class. It’s just a plain submit button and the same padding thing happens on hover.

#3

Hello @Parkinson_Canada,

Thanks for asking. :slight_smile:

Can you please share website URL for us to take a closer look?

Thanks.

#4

http://parkinsonca.thedev.ca/events-landing-page/ It’s the search form submit button.

it’s also on the front page of our site http://www.parkinson.ca/ It’s the learn more button. All the rest of buttons on that page are working correctly.

#5

Hello @Parkinson_Canada,

Thanks for updating thread. :slight_smile:

You can add following CSS under X > Theme Options > CSS to remove button hover effect:

.x-btn:hover, .button:hover, [type="submit"]:hover, a.x-btn.x-btn-flat:hover {
    padding: 0.579em 1.105em 0.842em !important;
}

Let us know how it goes.

Thanks.

#6

that improved it, but now the words seem to move on hover. You can see it on the first button on the home page:

#7

Hi again,

Please replace the previous code with the following code:

body .x-btn, body .button, [type="submit"], body a.x-btn.x-btn-flat {
    padding: 0.579em 1.105em 0.842em !important;
}

Hope this helps!

#8

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