Buttons are an essential part of your user experience. This element will impact your website’s interaction design heavily. It’s like a middleman between your products or services and your target customers. Buttons are powerful enough to compel your audient to convert and take action.

Regardless of what type of Divi website you have, whether it’s e-commerce or a personal blog, you must create journeys that end in goal conversion to achieve success. And using buttons is one of the best ways to improve your conversion rate.

Buttons have always been a major part of a website’s earlier functions that web developers apply. The design element helps visitors better comprehend how to make their way around the new online environment. As websites and its design evolved, so did buttons.

Nevertheless, it seems like the number of sites taking advantage of its effectiveness is declining. But if you want to encourage your visitors to take action and improve conversion, you must have a clearly-identifiable button.

In this tutorial article, we’ll show you how to easily create a nice, animated gradient button in Divi. On top of that, we’ll provide you with a freebie where you will be able to download a Divi section. Also, you can import it to the Divi Library to use straight away.

• You will need to have the Divi Theme by Elegant Themes installed.
• You can follow this tutorial or download our Ready-To-Use Divi Layout with all code embedded.

Live Preview      Download Now

Best Practices To Remember When Designing Buttons

➡️ Buttons Should Look Like Buttons

At first glance, a button should be very clear that it is a button. Being creative is always a good thing. But avoid getting too excited with your design and going over the top. You want the style of your button to look actionable to your users. Likewise, you also don’t want to make something too basic.

Also, links are not buttons. Bold text or those with underline may have caught the attention of users during the good old days, but that’s no longer impressive these days. Basically, you want to separate your button from the entire text and give it is its own space. Additionally, you want it to be bigger than the surrounding text. Lastly, its background color should be different, or at the very least, have a border.

➡️ Buttons Should Have A Uniform Design

Although all the buttons on your website do not have to look alike, their design principles should be similar to be recognizable. It’s fine to use a variety of colors. You can get away with as long as it serves a purpose. For instance, to indicate moving forward, you can use green. Meanwhile, red indicates moving backward.

The same concept applies to font style, size, and weight. You should apply these cleverly in a way that they emphasize the course of action you want your audience to take. So if the “buy now” button of your product is not the most noticeable CTA on that particular page, then you may want to redesign and make it more obvious.

➡️ Users Should Not Guess The Meaning Of The Button

Any user will not likely press a button labeled as “cancel.” What exactly are you asking them to cancel? The entire chain of actions on your Divi site or simply the last action they took? A well-designed button always contains a brief explanation of what its function is. So instead of cancel, you can put something like cancel the booking or cancel your subscription.

➡️ Make Your Buttons Engaging

Every button on your Divi website should offer visual feedback or interaction. When your users tap or click the button, they’ll be expecting its user interface to respond with relevant feedback. The feedback may either be visual or audible. When site visitors do not have any feedback, they may think that the system did not accept their command and do the action again. This usually causes several actions that are unnecessary. 

Why is this important? Well, as humans, we always expect some kind of feedback after interacting with an object. It may be in visual, audio, or haptic form, or just about anything that confirms the interaction was registered.

Awesome Animated Gradient Button Tutorials

In this tutorial, we will show you how to craft beautiful yet functional animated gradient buttons in Divi. By default, the Divi button mode enables you to add a gradient background to the button. Likewise, you can set different gradient backgrounds when you hover your mouse over the button.

However, one issue you’ll encounter is that these gradients will not animate as smoothly as you’d want them to be when you mouseover. Moreover, the gradient will change without any transitions, breaking the ever-important user experience.

So for this tutorials, we will not utilize the button module settings of Divi. Instead, we will add all customization with a bit of help from CSS. To do this, we will use “before” pseudo-class to display the default button background. Then, we will modify the opacity of “before” class to 0 with a pretty neat fade-out transition. Doing so will allow the button to change smoothly from one background to another when hovering the mouse over it.

To achieve the final result we cannot use default Divi Button customization settings so Use Custom Style For Button in Design → Button should remain disabled. Enabling this option will result in losing our customization.

For generating gradients, you can use the free Gradient Generator from Colorzilla, which we used in this tutorial. We also have an article about beautiful color gradients to inspire you on your next design project you can check out.

So without further ado, here are 9 stunning animated gradient designs you can try.

Animated Gradient Button with Grow Hover Effect

For this button sample we will use a nice orange gradient and add a zoom-in animation on hover.

In firts step we will add custom classes to our Button. To do that, open Button module settings and go to Advanced → CSS ID & Classes and add gradient_btn_style_1 gradientButton class to the CSS Class field.

We will also use modules Custom CSS fields to add some general button styling, like border-radius. Go to Advanced → Custom CSS tab and add the following code to Main Element field:

There is one more thing we will do in Button module settings. By default, our button will display an arrow button icon. For this tutorial, I have decided to remove it, as I think there are enough whistles with gradient animation and grow effect, but if you want to keep the icon, you can skip this step. I will also show how to change this icon in 3rd tutorial.

The icon is added to the button via after class. To remove button icon go to Advanced → Custom CSS and add display:none; to After field.

Our button is almost ready. We only need to add some custom CSS to make it fully working.This CSS can be added to Divi → Theme Options → Custom CSS or to the Divi child theme style.css if you are using one.

Square Gradient Button with Rotate Animation

For this button style we will use green gradient and rotate animation.

In firts step we will add custom classes to our Button. To do that, open Button module settings and go to Advanced → CSS ID & Classes and add gradient_btn_style_2 gradientButton class to the CSS Class field.

We will also use modules Custom CSS fields to remove border and icon from the button. Go to Advanced → Custom CSS tab and add the following code to Main Element field (for Desktop and Hover):

To remove icon go to Advanced → Custom CSS tab and add display:none; to After field:

Add the following CSS to Divi → Theme Options → Custom CSS or to the Divi child theme style.css:

Animated Gradient Button with Icon

For this button style we will use gradient animation and icon. Since we cannot use Divi default module settings to keep a nice gradient transition, we will need to tweak the icon via Custom CSS in Button module settings. Firstly lets add custom class to our button.

Open Button module settings and go to Advanced → CSS ID & Classes and add:
gradient_btn_style_3 gradientButton class to the CSS Class field.

In this next step we will add some custom CSS to the Button module settings to remove button border and tweak the icon. Go to Advanced → Custom CSS tab and add the following code to Main Element field:

border-radius: 100px;
border:none;
font-size: 18px;

The similar code must be also added to Main Element on Hover. Click the cursor icon located above the Main Element field, then click the Hover tab and add the following code:

border-radius: 100px !important;
border:none !important;

The last thing in module settings we need to do is to add some code to change the icon and improve its appearance. The full list of the Divi Icons with shortcodes you can use can be found here.

content: “\e003”;
font-size: 22px;
line-height: inherit;

There is one more tweak needed. As you noticed, the icon on hover is very close to the button text. To fix this issue we need to add margin-left: 5px; to After field on Hover:

In this last step add the following CSS to Divi → Theme Options → Custom CSS:

Animated Gradient Button with Shrink Hover Effect

In this button style we will use a beautiful and subtle blue animated gradient. We will also add a nice hover animation, so the button will shrink on hover.

Open Button module settings and go to Advanced → CSS ID & Classes and add:
gradient_btn_style_4 gradientButton class to the CSS Class field.

We will also use modules Custom CSS fields to add some general button styling, like border-radius. Go to Advanced → Custom CSS tab and add the following code to Main Element field (Desktop and Hover):

The icon is added to the button via after class. To remove button icon go to Advanced → Custom CSS and add display:none; to After field.

In this last step we only need to add the following CSS to Divi → Theme Options → Custom CSS:

Square Button with Rotate Hover Effect

For this button style we will use green gradient and rotate animation.

In firts step we will add custom classes to our Button. To do that, open Button module settings and go to Advanced → CSS ID & Classes and add gradient_btn_style_5 gradientButton class to the CSS Class field.

For this button we will also use modules Custom CSS fields to remove border and icon from the button. Go to Advanced → Custom CSS tab and add the following code to Main Element field (for Desktop and Hover):

To remove icon go to Advanced → Custom CSS tab and add display:none; to After field:

In this last step we only need to add the following CSS to Divi → Theme Options → Custom CSS:

Rounded Gradient Button with Bounce Hover Effect

For this button style we will use green gradient and rotate animation.

In firts step we will add custom classes to our Button. To do that, open Button module settings and go to Advanced → CSS ID & Classes and add gradient_btn_style_6 gradientButton class to the CSS Class field.

For this button style we will also use modules Custom CSS fields to add some general button styling, like border-radius. Go to Advanced → Custom CSS tab and add the following code to Main Element field (Desktop and Hover):

To remove icon go to Advanced → Custom CSS tab and add display:none; to After field:

In this last step, we will add some custom CSS with button styling and bounce animation. Add the following CSS to Divi → Theme Options → Custom CSS:

Animated Gradient Button with Move Up Hover Effect

For this button style we will use green gradient and rotate animation.

In firts step we will add custom classes to our Button. To do that, open Button module settings and go to Advanced → CSS ID & Classes and add gradient_btn_style_7 gradientButton class to the CSS Class field.

In this step we will add button border radius and will remove border. Go to Advanced → Custom CSS tab and add the following code to Main Element field (Desktop and Hover):

To remove icon go to Advanced → Custom CSS tab and add display:none; to After field:

In this last step, we will add some custom CSS with button styling and Move Up animation. Add the following CSS to Divi → Theme Options → Custom CSS:

Animated Gradient Button with Move Down Hover Effect

For this button we will add gradient animation and Move Down hover effect.

In firts step we will add custom classes to our Button. To do that, open Button module settings and go to Advanced → CSS ID & Classes and add gradient_btn_style_8 gradientButton class to the CSS Class field.

For this button we won’t add border-radius. We only need to remove the border from default button and button on hover. Go to Advanced → Custom CSS tab and add the following code to Main Element field (for Desktop and Hover):

To remove icon go to Advanced → Custom CSS tab and add display:none; to After field:

In this last step, we will add custom CSS with button styling and Move Down animation. Add the following CSS to Divi → Theme Options → Custom CSS:

Animated Gradient Button with Move Down Hover Effect

In this last tutorial we will add gradient animation and a nice 3D Box Shadow effect.

In firts step we will add custom classes to our Button. To do that, open Button module settings and go to Advanced → CSS ID & Classes and add gradient_btn_style_9 gradientButton class to the CSS Class field.

To remove icon go to Advanced → Custom CSS tab and add display:none; to After field:

And here is a bit of custom CSS with button styling and 3D Box Shadow animation.
Add the following CSS to Divi → Theme Options → Custom CSS:

Even though buttons are a common element of design, it’s worth all the effort to make them look as good as possible. Keep in mind that the key to making the design of your button’s user interface successful is clarity, recognition, and usefulness, just like the buttons in this tutorial. So make sure to give them a try today and let us know what you think by leaving a feedback below.