Selecteer een pagina

Turn Any Text Into A Responsive Call To Action Button in Divi

A call-to-action (CTA) is a button that you place on your website to drive prospective customers to take a certain action so they can become leads. A CTA often is a link between the regular content that your potential customer is interested in, and a landing page with an offer on it. CTAs can use all kinds of different wording to attract attention. For example: “Download my free ebook now” or “Start a free trial”.

Divi Theme does have a great Call to Action module and built it’s CTA buttons in several modules, but there are limitations. What if you want more then one CTA? Sometimes you need just a little more and for that occasions you can follow this simple tutorial to turn any text into a Divi like responsive CTA that doesn’t break on mobile.

How To Turn Any Text Into A Divi Call To Action Button

  1. Type in the text that you want to turn into the CTA anywhere in a Divi module on a page or post;
  2. Give your text a hyperlink using the standard hyperlink button;
  3. Switch to html text editor;
  4. Give the hyperlink a class by inserting the following markup before href. You can use any class name you like, for this tutorial I used ‘demo-cta’.
  5. You also have to add the class ‘et_pb_button’.
class="demo-cta et_pb_button"
Once you have added the hyperlink and the both classes it should look like this:
DIVI-RESPONSIVE-CTA-BOTTON-ADD-CLASS-HTML

Give styling to your new responsive CTA button

On the frontend your hyperlink will look like a nice Divi CTA button. Now we will add CSS to style your button. If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Divi>Theme Options. At the bottom of the page (ePanel) you can add the CSS in the Custom CSS window.

The first part of CSS is for styling the button:

.et_pb_button.demo-cta {
  	display: inline-block;
  	font-size: 20px;
  	color: #fff;
  	background-color: rgba(255, 208, 69, 0.8); 
  	border: 2px solid #FFD045;
  	border-radius: 3px;
  	margin-right: 10px;
  	margin-left: 10px;
}

You can change the font-size, color, background-color, border-color and -radius to anything you like. You can play with the margins if you use two buttons and want to add some whitespace.

The second part of CSS is for styling the the button when hovering over it:

.et_pb_button.demo-cta:hover {
  	background-color: rgba(255, 208, 69, 0.4);
}

In this example I only changed the background color on hover. In case you also want to change other elements you can add these from the first part of CSS. For example, if I also want to change the textcolor to black on hover the CSS would look like this:

.et_pb_button.demo-cta:hover {
  	background-color: rgba(255, 208, 69, 0.4);
  	color: #fff;
}

The thirt part of CSS is for adding a different icon after our CTA text when hovering over it:

.et_pb_button.demo-cta:hover:after {
 	display: inline-block; 
 	font-family: 'ETmodules';
 	content: "\3d";
}

In this example I added one of the Elegant Theme standard icons. You can add any of the Elegant Theme icons on your CTA botton. DiviSpace wrote a nice tutorial on how to use the ETmodules icon font. There you can find how to change the icon and a list of icon markups.

All together the CSS-code to add to your child theme will look like this:

/*Custom CTA button*/
.et_pb_button.demo-cta {
  	display: inline-block;
  	font-size: 20px;
  	color: #fff;
  	background-color: rgba(255, 208, 69, 0.8); 
  	border: 2px solid #FFD045;
  	border-radius: 3px;
  	margin-right: 10px;
  	margin-left: 10px;
}
.et_pb_button.demo-cta:hover {
        background-color: rgba(255, 208, 69, 0.4);
        color: #fff;
}
.et_pb_button.demo-cta:hover:after {
       display: inline-block;
       font-family: 'ETmodules';
       content: "\3d";
}

To make multiple buttons in various styles you can repeat this code with different classnames. If you have any questions please feel free to ask them in the comments.