Button is a crucial enough element if you want to offer something on your website. Be it via a landing page, navigation menu, sidebar. Anywhere. In Elementor, you can easily add a button on your website since this page builder plugin comes with a button widget. To make your button look more attractive, you might want to decorate it by adding a gradient effect, for instance.
By default, the button widget of Elementor has no option to add a gradient effect. But, nothing is impossible. With a little trick, you can create a gradient button in Elementor. The button widget itself is available on both Elementor Free and Elementor Pro so you can apply this trick no matter the Elementor version you use.
How to Create a Gradient Button in Elementor
To add a button in Elementor, drag the Button widget from the left panel and drop it to the canvas/editor.
On the Content tab, you can add the button link on the Link field. To change the default button label, you can replace the default “Click there” text on the Text field. You can also add an icon if you want.
To decorate your button, you can go to the Style tab. To change the font style as well as the size, you can click the pencil icon on the Typography option. To change the font color and the button background, you can click the transparent button on Text Color and Button Background options.
Here is the main step of this tutorial. To add a gradient effect on your button, you can click the pencil icon on the Box Shadow option.
Set the gradient color by clicking the color selector on the Color option and set the position to Inset.
To make your gradient color more visible, you can increase the opacity level. Now, you can set how your gradient color looks like by setting the Horizontal, Vertical, Blur and the Spread value, respectively.
Done! You can now publish your page once you are done with other widgets.