How to Create Gradient Buttons in Divi

by

Learn how to create transition gradient buttons in Divi. Gradient buttons are becoming a popular design trend.

Inspiration: http://layouts.madebysuperfly.com/divimaster/
Demo: http://artillerymedia.co/wordpress/gradient-buttons/

CSS Code: http://anthem.artillerymedia.co/addons/gradientButtons.css

Step 1 – Setup the Button HTML

Instead of using Divi’s Button Module, we’re going to use HTML code with a CSS class to create our button.  Go ahead and load a Text Module into your page.

Make sure you’re working in the “Text” tab in the Text Module, then type the link code below:

The “#” is where you’ll put your link.  We’ll use Facebook as our link.  We’ll also set the link to open in a new tab using  –  target=”_blank”.  Lastly, we’ll assign a class of “gradientButton” to our link using – class=”gradientButton”.

At this point, your “button” will not look like a button at all, but just a text link. In Step 2, we’ll style our “gradientButton” class to make this all work.

Step 2 – Style with CSS

I’d recommend watching the video in its entirety to fully understand what’s going on with the CSS.  I’ll break it down in a few pieces here.

You can place the custom CSS in a few spots:

  • Divi > Theme Options > Custom CSS area
  • Custom CSS area in the Divi Page Builder Settings
  • Child Theme CSS stylesheet

We’ll be using the “Divi > Theme Options > Custom CSS” area.
* If you’re using a Child Theme and are familiar with updating the CSS stylesheet for the Child Theme, I’d recommend that location instead.

The CSS code below sets the basic styling for our Gradient Button.  Notice no background colors are set yet for our gradient.  We’ll do that in a later step.

At the moment, Gradient Backgrounds are created using the “background-image” CSS property. This property is not eligible to use transitions at this time. Meaning we’re unable to easily transition from one background-image to another … or in this case, one set of gradient colors to another.

You’ve probably noticed CSS transitions before. For example, if you’ve ever hovered over a link and the color change seemed to fade into the next color, as opposed to changing immediately, that’s a CSS transition.

Hover over me

If we were to apply our gradient background-image to the main button, and then have the gradient colors change on “hover”; that will work but the change will be immediate. There will be no way for us to fade that change (unless you use jQuery).

Because of this we’re going to set our “hover” gradient colors on the button using the “:before” CSS pseudo-element.  We’ll set the “opacity” of this pseudo-element to “0” so the hover gradient colors are not visible.

Learn more about the :before and :after pseudo-elements…

We’ll round out this code by making the “opacity” of the “:before” pseudo-element “1” on hover of our button.

That was quite a bit of code. Be sure to watch the video for a full breakdown of what is happening and why I chose to do it this way. Even after all this code your button will still seem to not show up. It’s there though, we just need to assign gradient colors now.

You could include colors in the regular and hover state above. Those colors could act as a default set of colors that you can override with CSS if need be. That’s one approach.

The approach I’m going to use is we will setup different gradient color combinations and store those in a few CSS classes. We’ll use 3 sets: “orangeGradient”, “yellowGradient”, and “blueGradient”.

The code below creates these 3 classes and sets the colors for them.

Now that we’ve set our 3 color combinations, all we need to do is add one of those color CSS classes to our original link. I’ll choose the “orangeGradient” color combination. Be sure to include a space between class names in your code.

Boom goes the dynamite. =)

We now have our button working with a nice hover state.

With some study of the CSS code, you can change the color combinations, add new ones, and assign new colors to your link.

The nice thing is all of the basic styling of your buttons across the site is now controlled in one CSS rule. Handy! =)

0 Comments