By default, Elementor has a feature to create a gradient color for your button, but it’s limited only to two colors (dual color). This article will show you how to create a multi-color gradient button in Elementor without the help of any add-on, only using Elementor Custom CSS.
Adding a multi-color gradient to your button can make your button looks attractive and also give a natural feel. Maybe you are wondering, “Is it possible to create a multi-color gradient button on your site?”. Well, everything is possible in Elementor.
With Elementor, you can create a multi-color gradient button easily.
How to Create a Multi-color Gradient Button in Elementor
Before we start the tutorial, we want to inform you that this tutorial will work with Elementor Custom CSS. The Custom CSS feature is only available on Elementor Pro; ensure you’ve upgraded to the pro version.
Alright, go to your Elementor editor. We will start everything from scratch, so create a section with a single column. Afterward, please select the button widget from the widget panel and then drag and drop it into the canvas area. Once you’ve added the button widget, you can edit and style up the widget to your preference.
On the widget settings, navigate to the Advanced tab -> Custom CSS. Please copy the CSS snippet below, then copy it into the Custom CSS field.
selector .elementor-button {
background: linear-gradient(121.28deg, #A4006C 0%, #FFECA8 100%), linear-gradient(121.28deg, #69003F 0%, #FFF8F8 100%), linear-gradient(238.72deg, #00FFFF 0%, #0212A4 100%), radial-gradient(67.16% 100% at 50% 0%, #FF00B8 0%, #FFFFFF 100%), linear-gradient(140.54deg, #7000FF 0%, #001AFF 72.37%), linear-gradient(307.43deg, #FFE927 0%, #00114D 100%), radial-gradient(107% 142.8% at 15.71% 104.5%, #FFFFFF 0%, #A7AA00 100%), #FFFFFF;
background-blend-mode: overlay, difference, difference, overlay, difference, difference, difference, normal;
}
If you are happy with the multi-color gradient that has been applied (as in the image above), you can keep it like this and save your project if you want to. But, if you want to customize it, you can do that by editing the CSS snippet more specifically on the declaration block of the CSS.
Declaration block CSS begins with a left curly brace (‘{‘) and ends when a matching right curly brace (‘}‘) is reached.
To get the declaration block, you can create a gradient using CSS gradient online tools. Click here to see some CSS gradient tools that we recommend. Once you finish creating the gradient, copy the CSS and replace the existing declaration block with a new one by pasting the CSS.
Note: You can also make the text on your button gradient. Please click this link for our article about creating gradient text in Elementor.
The Bottom Line
This article shows how easily you can create a multi-color gradient button in Elementor. If you’re using Elementor as a page builder for your WordPress site and want to make a stunning button with a multi-color gradient, this article might be your solution.
The buttons with a single or dual color may look plain and boring. But be careful about creating a multi-color gradient to your button. Please pay attention to blending and mixing the color tones you use so that your buttons don’t look weird and annoying.
