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.
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.
2. Using the standard hyperlink button, give your text a hyperlink
3. Switch to html text editor
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.
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.
Keep em coming Geno – another in-depth and well explained tutorial.
wow thanks, I was trying to do this recently and had an issue with my solution so this is timely!
This is great, thanks. But one question, I want a column of buttons that are all the same width, but the content is not the same number of letters. so they are ending up different lengths. is there a way to make them a fixed width? thanks
Yes just add a fixed width to the button css for example
.btn-red, a.btn-red:hover {width:200px;}I use the background button code, but I don’t get the button with background… what can be wrong?
Link?
How could I apply this to the secondary navigation bar custom link?
https://quiroz.co/transform-a-divi-menu-item-into-a-cta/
Hi Geno, I used the old button CSS oding you gave and love it but it doesn’t seem to be responsive for mobile? The button text seems to break awkwardly across 2 lines on an iPhone 5 viewed in portrait (see link http://salesoptimisation.co.uk/). Can you help? Would this new CSS style work better? Many thanks
Can you do a tutorial to create a drop down button for DIVI? I want to have a drop down button to put on my woocommerce product page (ebook) in which a customer could select where to buy it from multiple retailers. Everything I’ve found online doesn’t work with Divi. Thoughts?
Thank you for all your tutorials Geno, I’m really learning a lot from them!
Thanks so much, Geno! I appreciate you sharing your experience.
I followed your directions and it worked perfectly. Now what I am running into is a problem with OptinMonster’s need to identify MonsterLinks with their own hyperlink class of “manual-optin-trigger”. How can a text link have two classes? “manual-optin-trigger” AND “btn-white”?
Much appreciate the reply!
Hello Shaun! It is possible to assign multiple classes to a text link, or any other object. In html you can add a space between the class names… class=”manual-optin-trigger btn-white”
However, if you are using a form from OptinMonster, you might be able to replace btn-white in the CSS with the class already being used manual-optin-trigger to style the button. I’d have to see your site to know for sure, but it could work.
Hi geno. Love your tutorials ..super helpful. Question regarding your monterey bay fun site. I want to do the same thing for the city I live in…how do you monetize it though? Advertising – have local businesses pay for space on the site? It’s also a great way for you to get clients from the site…because you deal with companies in your area….Thanks
Yeah the plan was to build it up first with content and followers and then monetize it through paid advertising. We put a hold on the project when I launched the Divi Marketplace back in May. I hope to get back to it some time later this year. Its a great opportunity to network as well 🙂
Might need to also add display:inline-block; to the .btn-red class for the width it to work.
Great tutorial Geno!
is there a way to accomplish this with bloom submit buttons? I’m trying to get the submit button to match the divi buttons on the site, but am getting some pretty inconstant results.
Hi Jerry. Yeah we can make the bloom buttons look just the Divi buttons but it would take a bit of work since I do not have a snippet handy for that one. I will add it to my to do list.
Hi Geno. Great post! Awesome stuff. Quick question: is there a way to use two different images as the button background? One as a default that changes to the other upon hover?
Thanks in advance!
Yes I am sure you can but I have not tried that yet. I would have to play around with it when I have some free time.
You are a god among men. Thank you for sharing this! Much better option than ET Buttons and way way way less time consuming than Divi Visual Builder. Can I leave you reviews anywhere to help you out? Seriously. I manage 20 sites that all use buttons of some kind and you just saved me so much time.
Thank you so much for your button tutorial. That has saved me so many hours of work. But will the button be able to be responsive?
Because some of my button have long wordings, and when see it on mobile, it break the line and the boarder just dislocate.
Thank you
You will need to add custom media queries for mobile if you use long words in your buttons.