Add shadow effects in buttons

Hey guys, whats up?

How it’s possible to create shadow effects and design best buttons (CTAs) for my landing page?
Example, I want to create a button like this:

Hey @guilhermemig17,
Maybe my monitor doesn’t have enough contrast to fully see what you are trying to do, but I think I can point you in some directions for you to try.

To me, this button looks like it has two different things going on. A border at the bottom of the button that is a little darker than the main color. Second, there might be a box shadow around the button - hard to tell.

For the first, select your button and either add a new class, use an existing one, or use inline styling (use partially depends on what type of project it is). I’ll add inline for simplicity.
In the Styles panel, click the third icon over in the visual editor. Then add a border width - thinker for more emphasis, or thinner for more subtle. Choose a color. Select solid border.

For the second, click the 7th icon. Within the box shadow section click on “Add Shadow”. You can fool around with the properties. This one is pretty strong, but you can fool around with each of he controls and see visually what it does.

Hope this helps,
Bob

1 Like