I made a tutorial awhile back showing you how to turn any text into a call to action button using a little html and css.

It is still a very popular post and used quite often by many. Just take a look at all the comments on that page. If you missed that one, you can check it out here.

But if you really like the Divi Button Animations, then you will need to add a few extra CSS Rules. Take a look at these two examples below using simple text with a hyperlink.

 

Divi Button

 

Divi Button

 

All I did was hyperlink my text, add a class in the html text editor and then use css to give it some style. Here is how you do it.

 

1. Type in the text that you want to turn into the CTA anywhere on your page or in a module.

001

 

2. Using the standard hyperlink button, give your text a hyperlink

002

 

3. Switch to html text editor

003

 

4. Give the hyperlink a class by inserting the following markup before the url href. You can use any class name you want or you can just copy mine exactly to keep it easy.

For the Solid Colored Background use this one…

class="btn-red"

For the Transparent Background use this one…

class="btn-white"

 

And this is where it should go in case you need a visual. Once you have made this change in the text editor, you can switch back to the visual editor anytime to continue working on your post/page.

005

 

The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

Add this CSS for the Solid Colored Background Button.

/* How to Turn Text Into Divi Animated Buttons */

	.btn-red {
	    	font-size: 20px;
    		font-weight: 500;
    		-moz-border-radius: 3px;
    		-webkit-border-radius: 3px;
    		border-radius: 3px;
    		padding: 8px 20px;
    		line-height: 1.7em;
    		background: transparent;
    		border: 2px solid;
    		-webkit-font-smoothing: antialiased;
    		-moz-osx-font-smoothing: grayscale;
    		-moz-transition: all 0.2s;
    		-webkit-transition: all 0.2s;
    		transition: all 0.2s;
    		position: relative;}
	a.btn-red {
		background-color: #be5555; /* change background color here */
    		border: 2px solid transparent;
    		color: #fff!important; /* change font color here */
		font-weight: bold;}
	a.btn-red:hover {
		background: #8e3737; /* change background color on hover here */
    		border: 2px solid transparent;
    		padding: 8px 34px 8px 14px !important;}
	a.btn-red:after {
		font-family: 'ETmodules';
    		font-size: 32px;
    		opacity: 0;
    		speak: none;
    		font-style: normal;
    		font-weight: normal;
    		font-variant: normal;
    		text-transform: none;
    		line-height: 1;
    		-webkit-font-smoothing: antialiased;
    		-moz-osx-font-smoothing: grayscale;
	    	font-size: 32px;
    		line-height: 1em;
    		content: "\35";
        	position: absolute;
    		margin-left: -1em;
    		-moz-transition: all 0.2s;
    		-webkit-transition: all 0.2s;
    		transition: all 0.2s;}
	a.btn-red:hover:after {
		opacity:1;
		display: block!important;
    		font-family: 'ETmodules';
    		speak: none;
    		font-style: normal;
    		font-weight: normal;
    		font-variant: normal;
    		text-transform: none;
    		line-height: 1;
    		-webkit-font-smoothing: antialiased;
    		-moz-osx-font-smoothing: grayscale;
    		right: 0px;
    		top: 5px;
		margin-left: 0;}

OR

Add this CSS for the Transparent Background Button.

 

/* How to Turn Text Into Divi Animated Buttons */

	.btn-white {
	    	font-size: 20px;
    		font-weight: 500;
    		-moz-border-radius: 3px;
    		-webkit-border-radius: 3px;
    		border-radius: 3px;
    		padding: 8px 20px;
    		line-height: 1.7em;
    		background: transparent;
    		border: 2px solid;
    		-webkit-font-smoothing: antialiased;
    		-moz-osx-font-smoothing: grayscale;
    		-moz-transition: all 0.2s;
    		-webkit-transition: all 0.2s;
    		transition: all 0.2s;
    		position: relative;}
	a.btn-white {
		background-color: transparent;
    		border: 2px solid #8e3737; /* change border color here */
    		color: #8e3737!important; /* change font color here */
		font-weight: bold;}
	a.btn-white:hover {
		background: transparent;
    		border: 2px solid #8e3737; /* change border color on hover here */
    		padding: 8px 34px 8px 14px !important;}
	a.btn-white:after {
		font-family: 'ETmodules';
    		font-size: 32px;
    		opacity: 0;
    		speak: none;
    		font-style: normal;
    		font-weight: normal;
    		font-variant: normal;
    		text-transform: none;
    		line-height: 1;
    		-webkit-font-smoothing: antialiased;
    		-moz-osx-font-smoothing: grayscale;
	    	font-size: 32px;
    		line-height: 1em;
    		content: "\35";
        	position: absolute;
    		margin-left: -1em;
    		-moz-transition: all 0.2s;
    		-webkit-transition: all 0.2s;
    		transition: all 0.2s;}
	a.btn-white:hover:after {
		opacity:1;
		display: block!important;
    		font-family: 'ETmodules';
    		speak: none;
    		font-style: normal;
    		font-weight: normal;
    		font-variant: normal;
    		text-transform: none;
    		line-height: 1;
    		-webkit-font-smoothing: antialiased;
    		-moz-osx-font-smoothing: grayscale;
    		right: 0px;
    		top: 5px;
		margin-left: 0;}

 

You can see where I commented the places to change the colors for each one. Have fun!

 


Well that’s all for now. I hope you find this article useful.


STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest