How to create a Call to Action like the Demo site

If you want to have a Call to Action style like the online Demo, this tutorial will show you how, including adding the animated button.

call to action

The code you will need is this:

<p>Clean simple design to give more emphasis on your website's content.<br><a class="btn btn-lg aqua animated fadeInDown" href="">Download Now</a></p>
  1. Go to Appearance >> Widgets
  2. Drag a text widget into the “Call to Action” sidebar position
  3. Title it to what you want. This will be the first line like the demo “Meet a Free WordPress Theme called Emphasize!
  4. In the content area, copy the above “code” and paste it into the widget. Make your changes to the content and the button link.
  5. Save your widget.

Styling the Button

With this theme, you get the following button sizes and styles…Make sure you start with btn as the first class to make it a button. Your sizes will be the classes you see in brackets below and in red.

Button Sizes

  1. Extra Small (btn btn-sm)
  2. Small (btn btn-sm)
  3. Default (btn)
  4. Large Button (btn btn-lg)

Button Colours

  1. Grey – this is the default colour, so no class required.
  2. Yellow (yellow)
  3. Brown (brown)
  4. Orange (orange)
  5. Aqua (aqua)
  6. Dark Aqua (darkaqua)
  7. Black (black)

How to Apply Button Styling

To style your button, you are basically adding classes to the actual link <a href> code like this example for the extra large button that is aqua in the demo:

<a class="btn btn-lg aqua" href="your link here">Button</a>

Adding Animation

With the demo above, the button has extra CSS classes to add animation. In this case, it’s this:

animated fadeInDown

Add this to the other classes to your link (button) code:

<a class="btn btn-lg aqua animated fadeInDown" href="your link here">Button</a>