We’re back with another Divi Theme Button Tutorial.

This button is super funky. We’re going to show you how to replicate the button Elegant Themes are using on their Black Friday marketing pages. It’s very simple to re-create. A little CSS and a Class name.

It can be used in both the Divi builder and the standard WordPress pages and posts.

Firstly, what does the button look like?

View Demo

So, if you’d like to re-create this Divi theme Black Friday button style, follow along below.

Step 1: Create a new page using the Divi Builder

A standard section will pre-load when you select the Divi Builder.

Click on the insert module option and you’ll be presented with the screen below.

Select the button option

Choose the button option. Then click on the button module to be presented with the button module settings home screen, pictured below.

Add your desired text to the button text box, and insert a link if you wish to.

Step 2: The Black Friday button design

Go to the design tab within the Divi button module. We’re going to do the following.

Select ‘use custom styles for button’

Switch ‘show button icon to no’

Switch the button module icon off

Set the button module padding to your desired padding, in order to replicate the Elegant Themes Black Friday button, we went with the 30px padding that they applied to the top, right, bottom and left options.

Step 3: Adding the class name and CSS to your Divi button

Select the advanced tab from within the Divi button module, as pictured below.

Copy and paste the following into the class section of the button advanced tab: black-friday black-friday-button.

Those are two classes that will correspond with the CSS that you will be pasting into your Divi theme options (or into your child theme if you have one set up).

Finally, this is the CSS that you will need to get the buttons to match the Elegant Themes Black Friday button perrrrfectly. Paste it where ever you prefer to put your CSS and you’re good to go.

From within your WordPress dashboard, select Divi, then Theme Options, and scroll down until you arrive at custom CSS.

     Black Friday Button DiviTutorials.co.uk

.black-friday p {
    text-align: center;

.black-friday-button {
    padding: 30px;
    background: #ce2fec;
    background: -moz-linear-gradient(45deg, #ce2fec 0%, #32c0d2 50%, #c1de0d 100%);
    background: -webkit-linear-gradient(45deg, #ce2fec 0%,#32c0d2 50%,#c1de0d 100%);
    background: linear-gradient(45deg, #ce2fec 0%,#32c0d2 50%,#c1de0d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce2fec', endColorstr='#c1de0d',GradientType=1 );
    color: #fff;
    box-shadow: 0 5px 15px 0 rgba(87, 37, 146, 0.29);
    transition: all 300ms ease-in-out;
    font-size: 24px;
    box-sizing: border-box;
	border-width: 0px !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    border-radius: 0;
    line-height: 1em !important;
    z-index: 2;
	margin: 0 auto;

.black-friday-button:hover {
    color: #fff;
    box-shadow: 0 15px 25px 0 rgba(87, 37, 146, 0.50);

     Black Friday Button DiviTutorials.co.uk End

Paste your CSS and hit save. Reload your page and admire this Black Friday button in all of its glory.

Don’t want to use the button module?

I’ve incorporated a few lines of CSS which means that you can also use this button style with a normal text module, and within a standard WordPress post.

To use this link within a text module, simply copy and paste the following;

<span class="black-friday-button black-friday">click here! to bookmark the deal page!</span>

That code works within a text module, as well as a standard post, but you will need to set a max-width: for the button when you take that route.

And there you have it

Please let us know what you think about this button in the comments below, and if you have any issues, feel free to let us know. Happy website building and let’s hope you grab yourself a few Divi bargains this Black Friday.