Adding Gradient Backgrounds to Elementor Buttons

Authored By: James LePage
Published On: August 2, 2020

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

amazon elementor E book

In this quick tutorial we're going to show you how to add a gradient background color to a button in Elementor. The base installation of Elementor and Elementor Pro do not have support for gradient backgrounds of any type. This is unfortunate, because it would be fairly easy to add to their well featured color picker.

Psst: If you like this article, give our "Gradient Text In Elementor" article a read too!

Luckily, adding gradient backgrounds to buttons in Elementor is fairly quick and easy. Let's jump right into it.

This is a two step process: first we're going to generate some custom CSS for our gradient button background, and then we're going to apply it to the button in Elementor. There are no additional plugins or tools needed here.

Step 1: Generate the gradient background for your Elementor button

We're only going to be using straight up CSS to apply the gradient background to our button, and to do that we need to create a simple code snippet.

#my-button { background: linear-gradient(-90deg, hsla(238, 100%, 71%, 1) 0%, hsla(295, 100%, 84%, 1) 100%); }

This is all you need to make your button Have a gradient background. The single line dictates that there will be a linear gradient with a 90 degree orientation. The following code shows the color that will be at position 0%, any color that will show at position 100%. Because it is a linear gradient, both of these colors will fade into each other, mixing completely at 50%.

You can choose to just write this out, but we recommend using a cool web app called Coolors.co to automatically generate this CSS code for you. For maximum compatibility, they also create several other lines of CSS that will apply gradient to your button background in Elementor, ensuring that this is supported on every single browser out there.

If you're interested in learning more, here is an article about how to use coolors.co to generate this gradient CSS.

Step 2: apply the custom CSS gradient background to your Elementor button

Now, all we need to do is apply this CSS to our Elementor button. First, ensure that the overall background color of the button in Elementor is disabled.

This is done by simply removing anything that shows in the color picker for the background color of your Elementor button.

Then, go to the advanced tab, navigate down to the custom CSS input, and simply copy and paste the code snippet generated in the first step.

And just like that, you've made a gradient colored button in Elementor, using nothing but CSS. If you found this article helpful, give it a share on Facebook or Reddit.

If you have any questions about adding gradient colors to Elementor buttons, reach out in our comment section below.

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.