
Colored shadows will never go out of style. Perfect for vibrant compositions when well-executed.
The button is simply a frame containing an icon and text. The frame has horizontal auto layout applied.
Important: Make sure to wrap the button in another frame. This wrapper will contain both the button and the button shadow as separate elements. I explain why below.
We want the coloured shadow to be visible through the translucent button layer. Adding a normal drop shadow does not allow this to happen as you can see in the image below. We'll have to get creative.
This duplicate layer will act as our drop shadow. So, make sure it's a child of the button wrapper layer.
You'll also need to make the contents (icon and text) of the duplicate button fully transparent.
Doing this will exclude it from the auto layout flow and allow it to be moved freely.
Position the duplicate behind the button, around where a regular drop shadow would appear.
Mimic the blurry edges of a drop shadow by adding layer blur.
Give it some padding. Add in text and an icon. Style as desired.
This is your button.
We're following nearly the exact same logic as in the Figma tutorial. We're creating two separate elements: a button (link block) and a drop shadow layer (duplicate of the button) which needed to be contained inside a wrapper (the div we just created). That div will allow us to enable absolute position for the duplicate (makeshift drop shadow) and layer the button and drop shadow using z index.
Make sure the duplicate is a child of the wrapper and a sibling of the original link block. This duplicate will act as our coloured drop shadow.
Change its background color to the desired drop shadow color and make its contents transparent.
Again, mimicking the appearance of a drop shadow.
Give the button relative position and the duplicate (shadow) absolute position.
Now, make sure the z-index of the button is greater than that of the duplicate. Z-index controls depth (the axis perpendicular to your screen, or 'through' your screen) and allows us to layer elements.