-
I’ve created a style via generateblocks for button named.button-large-
on the backend, the buttons look fine.
Unfortunately, on the site the text is blue (not white) and when hovering over button, the text transforms to red (both active/hover are underlined as well).Here is what I’d like for it to look like
Here is what it actually looks like.
I’m assuming that buttons are inheriting the site’s active/hover link attributes?
Is there any .css or anything I can do to make the buttons behave the way i want them to?
It must be something simple I’m overlooking, but any help will be greatly appreciated.
Thank you.
-
Hi there,
The blue link colour is coming from Customizer → Colors → Content → Links. You can remove those settings and instead apply your link colours under Customizer → Colors → Body.
For the underline, set Typography → Text Decoration = None. You only need to apply this in your Global Style for
.button-large.That way the buttons will stay white and won’t inherit the default link hover styling.
-
Thank you, i think that did it!
One last question – i notice that when i hover over the button the button seems to move and move the paragraph text below. Is that just how the transition acts? or is there a way to keep the button steady and not have it move and move the paragraph below?
-
Hi there,
That shift happens if the hover state adds or changes a border, padding, or line-height.
To fix:
- Make sure the Normal and Hover states have the same border and padding values.
- If you want a border only on hover, set a transparent border in the normal state, then change its colour on hover.
This way the button won’t move when hovered.
-
The border thickness didn’t match between active/hover.
That did it, Thank you. Will mark as resolved.
-
Great to hear that fixed it — thank you for confirming!
- You must be logged in to reply to this topic.