Return to previous page

How to edit/add animation around the text button elements

This topic has 4 replies, 2 voices, and was last updated 4 months ago ago by Tony Rodriguez

GTP

Participant

January 4, 2024 at 17:25

Hi 8theme team,

In regards to the text element buttons = https://xstore.8theme.com/elementor/demos/minimal-fashion02/text-button-element/

1) Can we have them “glow” or have the surrounding area around the button “glow” once hovered over?

2) Can we add animations around the button?

Please see PCA.

3) Once a button is hovered over, can we make it appear larger (as long as its hovered over) and once the mouse is not over the button, it goes back to its same size?

Please see PCA.

Thanks for your help!

Please, contact administrator
for this information.

#378600 Copied Theme version: 9.2.5

3 Answers

Tony Rodriguez

Support staff

January 5, 2024 at 12:35

Hello, @GTP,

1&2) Thank you for reaching out to us regarding your interest in customizing the XStore Text button elements on your website. We understand the importance of creating an engaging and visually appealing user experience. While we cannot precisely replicate the style of the button from the provided web link, we are pleased to guide you through the available options to enhance the appearance and interactivity of the XStore Text button.

To achieve the desired effects you mentioned, please follow these steps:

a) Hover Effects:

Insert the XStore Text button on your desired post, page, or static block.
Navigate to the button settings: Contents >> General.
Explore the “Hover effects” section, where you can choose from options like underline, overline, and more. This will provide a subtle yet effective visual change when the button is hovered over.

b) Animation Effects:

Still, within the same settings page, navigate to Contents >> General.
In this section, you’ll find the “Animation Effect” options. Choose from effects such as Zoom, Pulse, and others to add dynamic and eye-catching animations around the button.

c) Style Customization:

Continue to customize the appearance of your button in the “Style” section.
Set the normal and hover colors to match your website’s color scheme.
Adjust the typography to ensure a consistent and appealing look.

d) Advanced Section:
Explore the “Advanced” section for additional customization options.

For a visual reference, I have attached images illustrating these steps:
https://imgur.com/a/lhNcMQv
https://imgur.com/a/5YQ1mor

3) After careful consideration, we regret to inform you that the specific hover animation you are looking for is currently not available in the XStore Text Button. However, we have a viable solution for achieving the desired effect using Elementor, specifically in the button’s settings.

To implement the requested hover animation, kindly follow these steps:

a) Access the Elementor editor.
b) Navigate to the button you wish to customize.
c) Open the Style section of the button.
d) Within the Style section, locate the Hover tab.
e) Set the hover animation to “Bounce in.”

By applying this configuration, the button will appear larger while being hovered over, and it will seamlessly revert to its original size when the mouse is no longer over the button.

For a visual reference, we have attached images illustrating these steps:https://imgur.com/a/8lzW8Td

Kind Regards,
8theme team

#378698 Copied

GTP

Participant

January 5, 2024 at 17:17

Hi Tony,

Thank you for the detailed steps!

If we wanted to get something exactly the same on X-Store (as shown in the competitors website) will that require customization services?

We can ask this on the customization services forum from 8theme.

Appreciate your help!

#378799 Copied

Tony Rodriguez

Support staff

January 6, 2024 at 06:54

Hello, @GTP,

We trust this message finds you well. Thank you for reaching out to us with your inquiry regarding customization services to replicate features from a competitor’s website on our X-Store platform.

Should you wish to pursue paid customization services, you request additional customization.

Our high-level developers are equipped to provide you with a tailored solution for this. To get a precise estimate and discuss the customization, please submit a customization services request, and we will prepare a detailed estimate for the cost – https://www.8theme.com/account/#etheme_customization_panel (8Theme’s Customisation Services)

We appreciate your understanding.

If you have any more questions or need additional support, please don’t hesitate to ask.

Kind Regards,
8theme team

#378831 Copied
Tagged: add animation woocommerce, best selling themes, customize woocommerce themes, edit button elements, text button animation, woocommerce themes
Viewing 4 results - 1 through 4 (of 4 total)