CUBERTO STYLE BUTTON WAVE EFFECT - Elementor Wordpress Tutorial Flex Container

[@andreaegli]

If you know, you know - Cuberto button is here and also, this is the reference: cuberto.com/

[@daniloribeiro71]

I created a function with javaScript where it does this dynamically, 1 select all class the .elementor-button-text class, 2 get the text inside the span, 3 add the data-text attribute in the span, so it is possible to do this using Elementor's buttons are all defined globally, without the need to create HTML, much more practical. If you want the code, comment below

[@andreaegli]

Hey Danilo! That sounds awesome, yes, please post the code and thank you 🙏

[@daniloribeiro71]

@@andreaegli

[@daniloribeiro71]

@@andreaegli Hello, is there a channel I can send the code to as TH-cam is deleting the links?

[@margaridaoliveira1181]

oii danilo, há alguma maneira de vc me enviar? gostaria de usar em um projeto :)

[@daniloribeiro71]

@@margaridaoliveira1181 o youtube remove, qualquer meio de contato

[@iamnotenglish8835]

Hi, great video ! It works but I don't understand why my button has a defined color (blue) even with or without the change of color in the CSS. I don't have access to the CSS in Elementor so i changed it in the css of the theme apparence.

[@andreaegli]

Thank you! Could it be that you've set the color of the button to blue in site settings? I can't think of anything else..strange

[@OliveShamon]

Thanks for the video Andrea! Only issue im having is the code is affecting the button on my form widget. How can i resolve this?

[@chiaoya1978]

After trying the steps and consulting with ChatGPT, I still couldn't determine why the hover effect isn't functioning properly after publishing the post. I notice that the square appears both before and after hovering. QQ.

[@andreaegli]

I don't know, I used this in a project and it worked for me. what square do you see? do you have additional custom code on the page? where did you add this button?

[@chiaoya1978]

@@andreaegli I fixed it with !important after the overflow. sorry for bothering u and I'm really appreciate your prompt response and tutorial videos.

[@tarinpaletes]

@@chiaoya1978 Andrea, I'm also not getting the effect of the video. A square also appears to me instead of a circle. and this square only works when I go to the container where the text editor is and change it in the LAYOUT tab to OVERFLOW > HIDDEN. I did it on a blank page to make sure there wasn't any more code on it. What happened?! Because in the Elementor editor it works normally. But when loading the page in Chrome it gives the error.

[@tarinpaletes]

the most curious thing is this. none of the wordpress/elementor works perfectly. but when refreshing the page and opening it in Chrome or Opera, the square appears. Is there a problem updating something?! I already cleared the cache.. Tks

[@QamarAmin]

Cool, Thank you so much, I love your content. Please Please Please do more and more animations like GSAP etc which you see nowadays in modern sites?

[@andreaegli]

You are very welcome! I am and I will😁

[@QamarAmin]

​@@andreaegli Thank you so much , Keep up the great work. BTW I love how you teach, its really friendly and the way you talk, your accent makes it more interesting and enjoyable lol

[@AbdelrahmanEmad-mm2xs]

Thaaanks!!! I was checking out if you have uploaded new video from about 15 minutes 🤣

[@andreaegli]

You're weeeellloccccommmmeeee!!!! hahaha, love it!!!😁

[@visualmodo]

Truly good content =DDD

[@andreaegli]

Thank you!

[@zlkrn7951]

omg im looking tutorial elementor to the limit like this channel, thanks andrea to make tutorial videos. love it

[@andreaegli]

Glad you like it!

[@faysalahmedtarek8649]

thanks a lot for your remarkable videos.

[@andreaegli]

You are very welcome!

[@atulkadyan1303]

Finally the video is here which i requested thanks andrea. Really helpful video

[@borisnieminen677]

Excellent tutorial, thank you!

[@andreaegli]

Thank you 😉

[@Sarfarazzamani]

Thanks a lot. I watched mostly all of your tutorials! 😊

[@MKSCreatives]

The timing of this video is perfect, I've been trying to work out how to do this. Keep up the awesome videos.

[@franktielemans6624]

Glad you use that data-attribute trick I mentioned in one of your previous video's.
I noticed they use the same thing on that Cuberto website. A similar hover style can be found on the famous dennissnellenberg website, but he added a snappy magnetic effect.
I wonder why you use a text-editor widget, because I think you can use the regular button widget to build this.
Every elementor button has an attribute in the link options where you can add data-text, so you don't need a span element.
Is there a reason why you use the text-editor widget?

[@andreaegli]

I knew about the data-attribute but I forget to use it especially since I don't code that much. Yup!
I tried a while back to make it work with the actual button widget but I just couldn't make it work. I might give it another try when I have time. I know. It worked in the text editor widget so I went with it. Nothing else to it :)

[@ddLuizaKassia]

eu te amo, sério 😛
You're amazing

[@RememberThat_1]

I really love your videos ❤

[@andreaegli]

Thank you so much!🤩

[@dobrystudio]

Thank You for this!

[@andreaegli]

You are very welcome!

[@erickjfranco]

Thanks for the video, do not put a button inside a tag and it would be good in your videos when you talk about the code to use a zoom tool

[@andreaegli]

Thanks for the tip!

[@alexandrudragoi9065]

like, like, like

[@andreaegli]

thank you, thank you, thank you😁

[@yoon_b]

cool

[@sameerpatelxyz]

🤩🤩

[@teuccio73]

good job !

[@andreaegli]

Thank you, Teo!

[@husseinmostafa2028]

Good work

[@andreaegli]

Thank you 🙏

[@jeeiee_com]

Next video: Weblfow type Animated border button effect

[@andreaegli]

Can you send me an example or name a website with an effect like that?