What we're creating:

Figma tutorial

1) Add a button with low opacity fill

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.

Adding a drop shadow effect will not work!

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.

2) Duplicate the button and change the fill color of the duplicate

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.

3) Enable absolute position for the duplicate

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.

4) Apply layer blur effect

Mimic the blurry edges of a drop shadow by adding layer blur.

Done!

Webflow tutorial

1) Add a low opacity link block

Give it some padding. Add in text and an icon. Style as desired.

This is your button.

2) Wrap the link block in a div and enable Position: Relative

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.

3) Duplicate the link block

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.

4) Make the duplicate entirely solid color

Change its background color to the desired drop shadow color and make its contents transparent.

5) Add layer blur

Again, mimicking the appearance of a drop shadow.

6) Enable absolute position for the duplicate and layer with z-index

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.

7) Reposition the shadow using the 'top' property

Done!