How to create a WordPress Call to Action Button without a WordPress plugin. It can be done in several ways. In his blog the button will be created without any pictures and only with CSS3 styling. It’s free and simple to implement.

 

Why a Call to Action Button?

If you want to sell anything, the call to action button is the way to go. People in general are lazy, don’t want to work, don’t want to think and don’t want to choose. This sentence seems a bit negative, so to rephrase it: we like to accomplish tasks in a simple and efficient way.

To assist users we will guide a bit on the webpage. We will give users only a few options to choose from. But if we want to sell a new product we can try to grab the attention to this book via a nice story.

I don’t know if you read all the stories which you see, but I normally scan a page for information. I read some headers and paragraphs, if I am lucky… Normally I am just looking on where to click…

To help me a bit, it would be nice if there is a colorful button on the webpage! Of course, you don’t have to take my word for it, but we see the call to action button more and more in the different stores. Probably for a reason!

There are several ways to implement a call to action button:

  • Use a WordPress plug-in, like shotcodes ultimate
  • Use of a picture. Create a picture in a software program like e.g. Corel Paint. A picture is still very effective and in WordPress, you can make every picture click-able
  • Use of CSS3 styling. There are several ways to add styling to your website.
    1. Enter CSS3 code in the head section. Allthough I wil show you this later on, but it not seen as good practice. Not advisable!
    2. Enter the CSS3 code directly into the WordPress page. The code can be generated by a CSS3 button generator. WordPress also uses styling directly inside the page, so it is possible. With shortcodes you are doing this more or less also.
    3. Enter the CCS3 code directly into the style sheet of your (child) theme. The HTML code still have to be in your WordPress page / post.

 

Style CSS inside the heading:

Some plugins will use the same method and add any extra styling into the head section. Although the result is still okay it is not the best way to go. Most people will tell you, that it will slow down your webpage. This is just a discussion on milli seconds, so it should not bother too much. To get the CSS3 into your head, you need a theme which allows you to do so, or you need another plugin. In my case I use themes from StudioPress and they allow me to do so.
Here is the result:  

Press this for more styling videos

 

Inside the head section the CSS3 style:

<style>

.buttonfreevideo { color: rgb(237, 237, 237);

font-size: 24px; padding: 20px;

text-shadow: 0px 1px 4px rgba(30, 30, 30, 0.71);

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

background: rgb(16, 211, 115);

background: -moz-linear-gradient(90deg, rgb(16, 211, 115) 11%, rgb(21, 230, 20) 65%);

background: -webkit-linear-gradient(90deg, rgb(16, 211, 115) 11%, rgb(21, 230, 20) 65%);

background: -o-linear-gradient(90deg, rgb(16, 211, 115) 11%, rgb(21, 230, 20) 65%);

background: -ms-linear-gradient(90deg, rgb(16, 211, 115) 11%, rgb(21, 230, 20) 65%);

background: linear-gradient(0deg, rgb(16, 211, 115) 11%, rgb(21, 230, 20) 65%);

-webkit-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.78);

-moz-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.78);

box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.78);

}

.positionbutton1 {

clear:both; margin:0px 0 0px 10%;

}

</style>


Text inside your HTML this WordPress post:

<a class="buttonfreevideo positionbutton1" href="https://www.meijwebdesign.com/add-beginners-css-to-a-wordpress-page/">


with style inside the head</a>

As you can see the button is working fine

Style directly on the WordPress page / post:

If you don’t want to use a head for the CSS3 of your Call to Button then you can use the following code directly inside the HTML part of your WordPress Blog:

<a style="color: rgb(237, 237, 237); font-size: 24px; padding: 20px; text-shadow: 0px 1px 4px rgba(30, 30, 30, 0.71); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; background: rgb(16, 211, 115); background: -moz-linear-gradient(90deg, rgb(16, 211, 115) 11%, rgb(21, 230, 20) 65%); background: -webkit-linear-gradient(90deg, rgb(16, 211, 115) 11%, rgb(21, 230, 20) 65%); background: -o-linear-gradient(90deg, rgb(16, 211, 115) 11%, rgb(21, 230, 20) 65%); background: -ms-linear-gradient(90deg, rgb(16, 211, 115) 11%, rgb(21, 230, 20) 65%); background: linear-gradient(0deg, rgb(16, 211, 115) 11%, rgb(21, 230, 20) 65%); -webkit-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.78); -moz-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.78); box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.78); clear:both; margin:0px 0 0px 10%;" href="https://www.meijwebdesign.com/add-beginners-css-to-a-wordpress-page/">PRESS this BUTTON</a>

After copy-paste and re-write the 4 “””” in the paste text, here is the outcome:

 

PRESS this BUTTON

As you can see there is no hover effect with this method. Styling inside your page is therefore less attractive than the other 2 options. Styling directly on a page becomes less and less attractive as you almost have no control anymore. With a few pages this might still be possible, but with 500 pages, it is much easier to control all styles central from one styling page. Besides this, a website should be responsive and with styling inside pages, you can loose your responsive webpage.

CSS in style sheet

This is my favourite and should be anyones favourite.

The code I used is with the class button. This class ‘button’ is defined by the theme which I use from StudioPress.

<div style=”text-align: center;”><ul>

<a class=”button” href=”https://meijwebdesign.nl/30-pofessionele-website-ontwerpen-modern-en-mobiel-vriendelijk/”>bekijk hier de designs</a>

</ul></div>

To make our live easy:

If you want to make your code for your own button , as explained in the video: CSS3 call to action generator

Conclusion:

Normally a call to action button is already defined by your theme. Look inside your stylesheet and search for something like “.button”. If the button doesn’t stand out enough, you can use the generator and create your own button class. After inserting this inside the stylesheet, the new class can be used anywhere in your posts and pages. As it is nothing more than a copy – paste excercise, this should be your favourite over shortcodes.
The stylesheet from your theme is called style.css and can be found under ‘appearnce/theme editor’

Good luck, if you have some additional information, please shar this inside the comments!