How to Create a Gradient Button in Elementor

Updated: March 1, 2022

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.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Elementor.


How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.