.png)
.png)
What we're creating:
.jpg)
Figma tutorial
1) Add a transparent fill frame with a linear gradient stroke
Add text, some padding and round the corners & apply any other styling as desired.
2) Add two drop shadows
A dark, coloured shadow and a white light-mimicking shadow.
3) Add inner shadows (highlights)
These white shadows represent highlights. When well executed, white "shadows" can do a great job of giving a plain old 2D element a 3rd dimension.
Done!
Webflow tutorial
1) Add a link block
This link block will act as the button. Link blocks are much more flexible than the native button element that Webflow provides (e.g. link blocks let you add icons to your buttons as well as animate the elements within).
2) Add a div block inside the link block
Since Webflow does not allow us to add a gradient to a stroke, we'll have to get a little crafty.
The idea here is to add a gradient fill to the button and have that gradient fill ever so slightly peek outside of the inner div block so it mimics a stroke.
Fret not, the next couple steps will make it make sense.
3) Give the link block padding
Now, whatever sort of fill we add to the link block will look like a stroke.
4) Apply a linear gradient to the link block
We now have a makeshift gradient stroke. It's barely perceptible in the screenshot below but it's there.
5) Add button text and some padding (to the div block)
We need this to start looking like a button now so that's that.
I also added border radius to round out the button.
6) Add outer and inner shadows
We combine white and dark box shadows to simulate highlights and depth. Pay attention to the way light hits objects in real life. This should help tremendously
