Hello Uriel, thanks for the tutorial, really nice. I have a question.. In minute 3:45 you add the custom class + .elementor-button ... is this kind of elementor classes ALWAYS need? and if there is this one for buttons, where i can fin all the element classes.? Thanks a lot
Thanks for sharing Uriel, But I've ran into a problem, so i have multiple buttons i want to use the css for, but i just found out that once i apply it for one it messes up the others
Hey i know this video is 2 years old. But im having a small problem. I've got a button with 5px 5px 5px 5px radius. And i noticed that whenever it transitions even with adding, border-radius it doesnt transition very smoothly, you can kinda see the original rectangle (without border) at the very beginning of the hover effect. Could you help?
great tutorial! one question though: if the object above the button isn't full width under layout settings (for example, if it has custom width), the inline button appears on the same light as above object. how to force it to go under the object without changing above object's width settings?
I've set the button itself to relative so you don't have to change the position to inline (auto) in the settings. I just added this code before his : .elementor-button { overflow: hidden; position: relative; }
Hello, great video. I tried to integrate this effect into my test site. Basically it worked. Now I wanted to expand the function. I would like the button of the selected/active page to keep the background hover color. Example: I have 5 pages: Page1 Page2...... Page 5. On each page there are 5 buttons with text Page1 Page2...... Page5. If I now click on the Page2 button with the mouse, Page2 should open and the background color of the Page2 button should remain the background hover color until I call up another page. However, I am not offered a function for this in the CSS code window or I just can't find it. Can you help me with that? Thank you very much in advance....
Hi Uriel, thank you this was helpful. How can you make the hover background transparent? I want my button to go from a color to a transparent hover to show the image behind it. Thanks!
You can do this with a gradient too. We can’t animate gradients, but we can animate the background-position of the gradient. With background-size we can stretch the background to be taller than the element it’s on. Then you can animate background-position to slide the visible portion of the gradient up and down, left and right or even in a diagonal motion. I have examples, but I can't post links in youtube. Here is an example on a column selector .elementor-widget-wrap { background-size: auto 200%; background-position: left bottom; transition: background-position 0.3s ease-in !important ; } selector .elementor-widget-wrap:hover {background-position: left top; } Create a linear gradient background from blue to transparent (180°) with both locations on 50% to create a harsh transition. I make the gradient is as twice as tall as the column with custom CSS (background-size: auto 200%) Then we shift the position to the bottom so only the transparent part of gradient is visible. (background-position: left bottom;) On hover, the gradient slides to the bottom of the column with the background-postion property so only the blue part becomes visible. Like a curtain that come down. selector .elementor-widget-wrap:hover {background-position: left top;}
Great tutorial thank you very much ! However, I have a small problem, when I click on the button the text disappears :s Do you know where the problem could come from ?
Hi I need help I did all the steps like you did but I don't have this option in Positloning so the button is adjusted size I would love for your help please !
Bit late to this but having trouble when making this responsive in mobile? I have a left aligned button, then centered in mobile but now with the code applied the button is left aligned in mobile... Any way to fix this?
@@UrielSoto Yes thank you! I tried some work arounds by using padding/margins but made the animation go across the whole screen so ended up using an inner section and has seemed to fix it! Thank you for the awesome tutorial :)
This is exactly what I was looking for, awesome video, thank you so much!
Exactly what i looking for... thank you my lord
This works beautifully, thank you very much for posting this easy to follow tutorial, cheers
You're welcome!
this is the button which i need Sir , Thanks Uriel Soto
Really great tutorial. Thanks
Hi really great tutorial , thanks alot , I was looking for it
Thank you for this! 🙏🏻
very cool information , thank you
Awesome video
good video, thanks !!
Thanks for this tutorial
This is awesome man, if you ever decide to do a updated version, maybe try to allow this effect for buttons with curved corners (border radius).
just figured it out add "border-radius: 5px;" with your desired radius px in the first css code section.
Thanks again.
thanks, you're a genius!
thank you so much!!!
Awesome tutotrial it helped me a lot. Thanks!
Thanks!
Thank You for this amazing video. But a quick question: Can I use this type of effect on astra Add to cart button ?
Namaste Bro, you always rockz mam.. Keep up the good work bro.
Thank you soooooooooooooooo much❤
Beautiful, thank you !
Thank you!
Hello Uriel, thanks for the tutorial, really nice. I have a question.. In minute 3:45 you add the custom class + .elementor-button ... is this kind of elementor classes ALWAYS need? and if there is this one for buttons, where i can fin all the element classes.?
Thanks a lot
Love the hover animation but when I click on the button, the text is still staying on hover color.
Thanks for sharing Uriel, But I've ran into a problem, so i have multiple buttons i want to use the css for, but i just found out that once i apply it for one it messes up the others
hi Uriel. I love following your videos.
can you recreate this effect (water ripple effect ) with Elementor?
Hey i know this video is 2 years old. But im having a small problem. I've got a button with 5px 5px 5px 5px radius. And i noticed that whenever it transitions even with adding, border-radius it doesnt transition very smoothly, you can kinda see the original rectangle (without border) at the very beginning of the hover effect. Could you help?
great tutorial! one question though: if the object above the button isn't full width under layout settings (for example, if it has custom width), the inline button appears on the same light as above object. how to force it to go under the object without changing above object's width settings?
I've set the button itself to relative so you don't have to change the position to inline (auto) in the settings. I just added this code before his :
.elementor-button {
overflow: hidden;
position: relative;
}
Hello, great video. I tried to integrate this effect into my test site. Basically it worked. Now I wanted to expand the function. I would like the button of the selected/active page to keep the background hover color. Example: I have 5 pages: Page1 Page2...... Page 5. On each page there are 5 buttons with text Page1 Page2...... Page5. If I now click on the Page2 button with the mouse, Page2 should open and the background color of the Page2 button should remain the background hover color until I call up another page. However, I am not offered a function for this in the CSS code window or I just can't find it. Can you help me with that? Thank you very much in advance....
Hi Uriel, thank you this was helpful. How can you make the hover background transparent? I want my button to go from a color to a transparent hover to show the image behind it. Thanks!
You can make the button transparent by going to the background color and just bring the bar down
@@UrielSoto ah, obvious fix, thank you!
I gonna use this css for customize a button on shopify
That's works too haha
You can do this with a gradient too.
We can’t animate gradients, but we can animate the background-position of the gradient. With background-size we can stretch the background to be taller than the element it’s on. Then you can animate background-position to slide the visible portion of the gradient up and down, left and right or even in a diagonal motion.
I have examples, but I can't post links in youtube.
Here is an example on a column
selector .elementor-widget-wrap {
background-size: auto 200%;
background-position: left bottom;
transition: background-position 0.3s ease-in !important ;
}
selector .elementor-widget-wrap:hover {background-position: left top;
}
Create a linear gradient background from blue to transparent (180°) with both locations on 50% to create a harsh transition. I make the gradient is as twice as tall as the column with custom CSS (background-size: auto 200%)
Then we shift the position to the bottom so only the transparent part of gradient is visible. (background-position: left bottom;)
On hover, the gradient slides to the bottom of the column with the background-postion property so only the blue part becomes visible. Like a curtain that come down.
selector .elementor-widget-wrap:hover {background-position: left top;}
Thanks for sharing! There are various ways of accomplishing this effect. I love using css so this was my solution.
Can you do that with an image for example?
could you please make more videos on the free version of Elementor.
Great tutorial thank you very much ! However, I have a small problem, when I click on the button the text disappears :s
Do you know where the problem could come from ?
I just noticed that the problem occurs because it's a scroll button, if I click next to it, the text reappears.
I updated the link with this exact scenario. Just scroll to the bottom of the article and you'll find the CSS code to add along with it.
@@UrielSoto Thank you very much ! :)
great but how can i add the css code to the theme
Hi I need help I did all the steps like you did but I don't have this option in Positloning so the button is adjusted size I would love for your help please !
I don't have this option in Elementor Positioning, what do I do?
???
Can you show how to add reveale effect on text and image?
Yeah video should be out tomorrow
how do i do it if i have border radius what css do i add?
If you have a border radiues. Apply the border radiues amount to the :before css
@@UrielSoto im a newbie what code do i enter
Bit late to this but having trouble when making this responsive in mobile? I have a left aligned button, then centered in mobile but now with the code applied the button is left aligned in mobile... Any way to fix this?
Did you set your button width to inline under advanced. It used to be under positioning but not it's in advanced. 5:18
@@UrielSoto Yes thank you! I tried some work arounds by using padding/margins but made the animation go across the whole screen so ended up using an inner section and has seemed to fix it! Thank you for the awesome tutorial :)
@@benfrowen94 also adding this code helped without setting its width to inline:
.elementor-button {
overflow: hidden;
position: relative;
}
for some reason my border disappears when hovering
How do I add a custom css to more than one button on the same page without messing up the others
Just use the same css class for the other buttons. If they don't have the same style than you'll need to make a separate one.
Osm
thxxxxxxxxxxxxxxxxxx
Nothing fixed when i did inline lol
Update this video asap cuz elementor is now updated
100 like
Excellent, thank you!