For anyone having trouble to create the BUTTON 2: Do follow every single step Sergei does because I didn't and was struggling. The really important element there is the FRAME which I didn't do and he even said it is really IMPORTANT. If you try to do it without a frame, the shadow simply fades away under the button without it "moving" down. The frame acts as a "mask" or a "window" where everything you move is registered and smart animate will take into consideration. I hope this helps other designers. Lovely tutorial!
I think one of the easy way and the best tutorial for animation and it is so great and awesome video ...easy to understand .... Thank you soo much for the great video.❤
I'm having trouble creating a button, but the last version! I don't want the little rectangle to appear at the bottom, I just want to have empty text, then the background appears with a hover. However, it offsets my text, and it moves it to the center of the rectangle whenever I do it... Do you have any tips? This sounds so simple to resolve but I can't manage haha
It depends how you want it. It can be in “hug” mode just to be the size of the text or “fill” if you want it to be full width on mobile. Of course hover effect will not work on mobile but you can use this effects for pressed state
Totally understand - it’s just sometimes good to see these in situ. For example, the 1st button design, would the circle still fill button if it was responsive to fluid grid or would I keep having to adjust the size of the black dot for each grid.
yes, probably you'll have to adapt the size of the back circle because the width of the button would be larger. However you can try to make back circle 2x large in the main component so it also fills on the mobile and you don't have to adjust it.
@@Sergei-Chyrkov thanks! You’re correct - you just have to make the object in the mask (circle) huge and adjust the timing if it’s off. Thanks for your help!
For anyone having trouble to create the BUTTON 2:
Do follow every single step Sergei does because I didn't and was struggling. The really important element there is the FRAME which I didn't do and he even said it is really IMPORTANT. If you try to do it without a frame, the shadow simply fades away under the button without it "moving" down. The frame acts as a "mask" or a "window" where everything you move is registered and smart animate will take into consideration.
I hope this helps other designers. Lovely tutorial!
Thanks for feedback and pointing out important moments for other designers! Good luck!
amazing! I guess I like the second button! I’d like to practice it over and over again! Weldone 😊
Great!) we can get the link to a file in the description!)
Another fantastic and easy to follow video! Make more!
Thanks!) I’m happy you like it!)
I think one of the easy way and the best tutorial for animation and it is so great and awesome video ...easy to understand .... Thank you soo much for the great video.❤
Thank you so much for this lovely feedback!☺️ I’m glad you like!
perfect
Thank you!
button 2 looks super cool!
Agree, one of my favorites))
Super awesome tutorial. Thank you so much!
Glad you enjoyed it!
This is a cool concept for a tutorial. Great way to learn multiple stuff in one short video. Thanks. :)
Thanks!😁 I’m glad you like!
Amazing tutorial.... thanks for sharing 😊
Thanks!) I’m glad you like it!
Thanks for sharing Ideas sir, Love from India
You are welcome, my friend!😉
excellent tutorial❤
Thank you! 😊
Thank you, very interesting.
Glad it was helpful!
Amazing Sergeri :)
thank you!))
All button effects had a wow effect on me. However I loved the 3rd button effect, the one with the light effect on it......
Thanks for feedback!) yes, I believe you can use it for luxury sites
great video!!!
Glad you liked it!!
Fire!
🔥
I'm having trouble creating a button, but the last version! I don't want the little rectangle to appear at the bottom, I just want to have empty text, then the background appears with a hover. However, it offsets my text, and it moves it to the center of the rectangle whenever I do it... Do you have any tips? This sounds so simple to resolve but I can't manage haha
Hi! Are you using auto layout? Try to set background rectangle to absolute positioning. Or try to build the button from a regular frame with text.
Is it possible to do this when the buttons are built with auto-layout and their content at different instances causes them to be different widths?
Yes, try “absolute position” of the element inside the auto layout
Can you show these buttons in how they would fit in a responsive grid/auto layout?
It depends how you want it. It can be in “hug” mode just to be the size of the text or “fill” if you want it to be full width on mobile. Of course hover effect will not work on mobile but you can use this effects for pressed state
Totally understand - it’s just sometimes good to see these in situ. For example, the 1st button design, would the circle still fill button if it was responsive to fluid grid or would I keep having to adjust the size of the black dot for each grid.
yes, probably you'll have to adapt the size of the back circle because the width of the button would be larger. However you can try to make back circle 2x large in the main component so it also fills on the mobile and you don't have to adjust it.
@@Sergei-Chyrkov thanks! You’re correct - you just have to make the object in the mask (circle) huge and adjust the timing if it’s off. Thanks for your help!
Good luck!🙌
I tried this but the absolute positioning didn't still clip the content.
Please check your layers and smart animation settings
How to convert into code
You can try to use plugin To HTML, or copy css properties and code manually
i'm getting animation glitch🥲
🫣