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.
hover above the gradient line dots, your cursor will change then you can turn them around. This app is shit show, basic functionalities are intentionally made harder idk why they want to reinvent the wheel.
@shasha-hurr yooo you saved my lifeeeee this is life-changing. I used to use figma so I never was able to do this in framer. Hahahahahaha thanksssss budsssssss
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
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 ... 😅
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 🙌
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 🫶
💯 excelent. You're amazing
Thank you so much
great idea man. But I have one more way to do that... but this is short
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?
it's because rounded buttons don't support gradient borders in code....or something like that :D
Yep!
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
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.
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 does my gradient fill doesn't go diagonal? I thought it's only up and down gradient I can't drag the gradient diagonal
hover above the gradient line dots, your cursor will change then you can turn them around. This app is shit show, basic functionalities are intentionally made harder idk why they want to reinvent the wheel.
@shasha-hurr yooo you saved my lifeeeee this is life-changing. I used to use figma so I never was able to do this in framer. Hahahahahaha thanksssss budsssssss
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
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.
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 🫶