How to Create a Gradient Button in Elementor

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.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2012. He is responsible of all content published on this website.
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?