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.
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 area.
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, you can simply click the color picker on Text Color option.
Here is the main step of this tutorial. To add a gradient background to your button, you can click the Gradient tab on the Background Type option.
To set the gradient, you can simply set the first color and the second color. You can set the location of each color, gradient type (radial or linear), and the angle.
Done! You can now publish your page once you are done with other widgets.
Creating a Multi-Color Gradient Button
The gradient feature of Elementor is limited to maximum of two colors. If you want to create a gradient button that consists of multiple colors (more than two), you can make use of the custom CSS feature (only available on Elementor Pro).
First, add a Button widget or edit an existing one. On the settings panel, go to Advanced tab and open the Custom CSS block.
Paste the following CSS code to the Custom CSS block.
The code:
selector .elementor-button{background-image:
linear-gradient(to left, #FEAC5E, #C779D0,#4bc0c8);
}
To change the colors of the gradient, you can simply replace the hex code.
If you want to use your own CSS gradient, make sure to add the button selector (.elementor-button). You can visit this post and this post to get tailored CSS gradients for Elementor.
The Bottom Line
There are several design options you can apply to a button on your Elementor design. One of which is gradient. You can effortlessly add a gradient color to your button as Elementor has a native setting options to do so. However, you can add the maximum of two colors.
To add multiple colors (more than two) to your gradient, you can achieve via custom CSS.
