Streaming live at 10am (PST)

How to create a button like this


#1

I'm trying to create a button similar to the below. What's a tad perplexing is the stroke/3d effect at the bottom that makes the button look slightly elevated.

I've got the rest of it locked down I just can't figure out how to create the bottom effect.

Can anyone help out?

Thanks!


#2

Can anyone help out here?


#3

Hi @grandtheftpixel.

https://webflow.com/design/greenbutton?preview=308803e6185727ad5a1d612d645f313b

Please see the link above. I get this effect by adding a drop shadow at the bottom of the button which is a slightly darker green than the base color of the button.

Hope this helps.


#4

Hey mate thanks for the share. I can't see it though - looks like its authenticated?


#5

Figured it out! Thanks mate.


#6

Looks like @VihanVanDerWalt got it right, but it seems like there is also a border around the button that is the same color as the drop shadow. Try adding that as well.

Note: Depending on the size of the border, you might have to edit the settings of the shadow (spread, size)


#7

Here is an example I made for you guys to see. When I can I'll update the page to show how to make other cool stuffs like this. Cheers!
Fun Webflow Stuff


#8