Button Hover Styling Issue

This topic has 7 replies, 2 voices, and was last updated 1 year, 3 months ago by Elise Noromit.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
August 1, 2023 at 8:26 pm #485803

user321
Participant

Hi,

I am experiencing an issue with the button styling on hover.

The button should be blue with white border and white text. When hover over button it should change to white button with blue text. This is working correctly when hovering over the button.

The Issue:
When I hover over the area beside the button the text changes to blue, this should not have a hover effect. See attached video to understand this.

Custom button style
– Button background: #1246AB
– Button text: #ffff

Custom button hover style:
– Button background: #ffff
– Button text: #1246AB

Attachments:
You must be logged in to view attached files.

August 2, 2023 at 4:08 am #485841

Elise Noromit
Member

Hello,

You can set the button styles in the Theme Settings > Styles and colors > Buttons, if you want a specific color on a certain page, please apply the Theme Settings presets: https://xtemos.com/docs-topic/theme-settings-presets/

If you have any questions please feel free to contact us.

Best Regards

August 8, 2023 at 9:25 pm #487458

user321
Participant

Hi Elise,

This did not resolve the issue, the problem still occurs. I have had to remove the hover effect and do this manually via CSS to target only the button not the container.

August 8, 2023 at 9:38 pm #487459
user321
Participant
This is disappointing, your response did not resolve the issue.

On another website I use woodmart with WPBakery I have the same style with hover effect with no issue.

I prefer using Elementor now and this is some sort of bug. You explanation was not clear enough.
- This reply was modified 1 year, 3 months ago by user321.
August 9, 2023 at 3:53 am #487501

Elise Noromit
Member

Hello,

Please provide the page URL and screen of the button you want to change, most likely the button is related to another plugin.

If you have any questions please feel free to contact us.

Best Regards

August 11, 2023 at 3:52 am #488038

user321
Participant

The buttons are on every page, they are the top section part of the footer.

August 11, 2023 at 4:31 am #488045
user321
Participant
I have resolved this with custom CSS by giving the buttons class and manually applying a hover effect:
```
.footer-button .btn:hover {
    color: #1246ab;
    background: #ffffff;
}
```
most likely the button is related to another plugin.

The button is unrelated to another plugin, this is part of XTEMOS template layout. I just want to add a simple hover effect.
August 12, 2023 at 3:50 am #488332

Elise Noromit
Member

Hello,

Your video screen shows the default Elementor button: https://gyazo.com/af74bc7813966f8cdcdb773e5be12e97

Please add the Woodmart button https://gyazo.com/b14609680e8fdb560d8c42b0594e57cb

Then configure the button in the Theme Settings.

Best Regards
Author

Posts