As you are here, you must already know about Elementor. It is a popular WordPress page builder plugin with a very intuitive user interface. You can use Elementor to create a beautiful page on your WordPress site without coding. You can even create a WordPress theme as well with the pro version. Still without coding.

When working with Elementor, you can add a button on the page you are working on. Button is one of the design elements offered by Elementor. This element is available on both the pro version and the free version of Elementor. Of course, you can also dress up your button to make it looks more attractive so that your aspiring visitors get encouraged to click it. Probably, you want to add a gradient effect.

Elementor doesn’t specifically offer a gradient effect setting, but you still be able to add a gradient effect to your button thanks to Box Shadow.

How to Create a Gradient Button in Elementor

First and foremost, add the Button element by dragging it to the canvas.

Change the default settings such as the default text, size, and alignment. You can also add an icon if you want. Once done, switch to the Style tab. There are 6 setting options you will find here:

• Typography: To change the default font, font size, font style and so on.
• Text Shadow: To add a shadow effect to the text.
• Text Color: To change the default text color.
• Background Color: To change the default background color.
• Border Type: To add a border (your button has no border by default).
• Border Radius: To add a border radius. You can use this setting to make your button get rounded or rectangle.
• Box Shadow: This is the setting to add a gradient effect.
• Padding: You can use this setting to set a customized size of your button.

The first step you need to do is change the background. Change the default background on the Background Color section. This will be the base color of the gradient.

Next, switch to the Box Shadow section. Here is the main step of adding a gradient effect to your button. Set the color shadow. This will be the secondary color on your gradient effect.

Set the Position from Outline to Insert. This will bring the shadow to the inside area of the button.

Next, set the values of Horizontal, Vertical, Blur and Spread until you get the gradient effect you want.

Final words

Until the new update of Elementor offers a gradient setting for a button, you can use the steps we have covered above to add a gradient effect to your button. However, you can only use one color as the secondary color.