isotropic-2022
Share
Blog
Search
Menu

Adding Gradient Backgrounds to Elementor Buttons

By James LePage
 on August 2, 2020
Last modified on January 6th, 2022

Adding Gradient Backgrounds to Elementor Buttons

By James LePage
 on August 2, 2020
Last modified on January 6th, 2022

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.

isogroup-cover
Join The IsoGroup
A vibrant Facebook Group to talk about web design and the business of agency. Daily curated resources and conversations.
oxygen-course-isotropic
Oxygen Builder Course - Coming Soon
The Oxygen Builder Mastery course will bring you from beginner to professional - ACF, MetaBox & WooCommerce modules included.
Get Launch Notification & Discount
bricks-builder-course
Bricks Builder Course - Coming Soon
The Bricks Builder Mastery course will bring you up to speed on this popular builder.
Get Launch Notification & Discount
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram