Thanks a lot I didn't know that I can rotate gradient that easily thus I did it in a simpler way instead of using stack just a frame inside a frame without the need of absolute position and Z index and the text inside is the child of the second rectangle
Thank you for this great workaround! I'm not sure why correct section titles are not being shown in the video though 🤔As I see it time stamps are included perfectly right in the video description though, there must be some kind of glitch, which is not a big deal, since you demonstrate the workaround in a really clear way, thank you 😊👍
Nice! And if we want to make a secondary version without fill and only with the border gradient, we can do it with a few more steps using the mask property, right? (:
Yes, you can definitely use the mask property. I’m not sure if it will work with different labels tho since the button width might be changing and the mask you upload is a fixed svg.
Amazing tutorial! But such a difficult and not intuitive way for framer to do something that should be simple as just adding a border. Really. I love framer but these things ... 😅
Its easyer to do with 2 blocks, both same size but front has 2px border (inset, transparent). So on hover we can change both. But gradient borders is a pain for developers because its hard to make smooth animation if you make another colors. So please just dont do that xD
Thanks a lot I didn't know that I can rotate gradient that easily thus I did it in a simpler way instead of using stack just a frame inside a frame without the need of absolute position and Z index and the text inside is the child of the second rectangle
Your content is very good ! Can you make a small framer course in which you explain the basics of framer.
Thank you!
That’s the plan:) releasing it soon! Stay tuned 🫶
HAX
Been figuring out all sorts of puzzles myself. Fun stuff.
It is fun :)
Thank you for this great workaround! I'm not sure why correct section titles are not being shown in the video though 🤔As I see it time stamps are included perfectly right in the video description though, there must be some kind of glitch, which is not a big deal, since you demonstrate the workaround in a really clear way, thank you 😊👍
Thanks for the feedback man! :)
Chapters showing up correctly for me. Must’ve been some bug.
@@framer.university Ah thankfully now they look fixed to me as well, agree, must have been some bug 🙌
Thanks a lot Nandi for this🔥
🤝
💯 excelent. You're amazing
Thank you so much
Great timing. Literally started framer this week and noticed that the option wasn’t there
Glad I could help! :) Come back for more info. Happy to help with anything you’re struggling with 🫶
Thanks for another great video! Like!
Thanks for the support mate :) more to come 🫶
Cool!
Thanks!
Nice!
And if we want to make a secondary version without fill and only with the border gradient, we can do it with a few more steps using the mask property, right? (:
Yes, you can definitely use the mask property. I’m not sure if it will work with different labels tho since the button width might be changing and the mask you upload is a fixed svg.
great idea man. But I have one more way to do that... but this is short
What if you want to do that while having space between the button and the gradient border ? (With the space being transparent)
limitation is cannot use transparent background with the gradient button which is what I am trying to do somehow, any work around?
How to create the button where a small ray of light rotates around the button in default state?
Here:
framer.university/resources/gradient-border-button
Does anyone know how to get a video preview framer like this?
how can i make it anomated all the time instead of hover or click
On the right panel, there’s an “effect” section where you can apply a loop effect
it's because rounded buttons don't support gradient borders in code....or something like that :D
Yep!
it looks weird when i zoom out to 80% on my site
What do you see?
dude what happened to your reds? 😅 great vid tho
Thanks!
What do you mean by reds?
Why not create a frame over a button and set padding to 1px on each side and set fill to gradient? Easy bruhh
Have you tried this solution (what you have just suggested)?
Amazing tutorial! But such a difficult and not intuitive way for framer to do something that should be simple as just adding a border. Really. I love framer but these things ... 😅
Adding a border is simple, and you can simply do it in Framer. Adding a gradient border is not, even with code.
Thanks :)
Yes unfortunately this requires a bit of workaround. It’s because on the web, you can’t simple just set a gradient color as a border.
Its easyer to do with 2 blocks, both same size but front has 2px border (inset, transparent). So on hover we can change both. But gradient borders is a pain for developers because its hard to make smooth animation if you make another colors. So please just dont do that xD
i don't know why he use 2 shapes, this can achieve with one shape
explain
correct, just add fill color to black on text so you dont need second shape for the black one. thanks me later
Lemme know how.
First comment 😂
The best 🫶