How to Create Call-to-Action Buttons using Custom HTML In Gutenberg

Introduction

This is the first article where I am actually going to show you some code using Code Pen. I found that Code Pen is a great way to showcase the code that I will use for this article because I can just write everything there and then just link to it from here. This article does talk about code so this is a more technical article than what I usually write. So I am excited to show you what I created in Code Pen. As a preface, the code that I will show you is just a demo and gives you an idea of how to create something similar to this. I will explain my code and write it in HTML, CSS and JS. I have other articles that discuss these languages. Take a look at my article on writing code in the Gutenberg Block Editor if you want to get a primer before I continue on.

Why Are Call-to-Action Buttons Important

Before I show you the code, I want to discuss the importance of call-to-action buttons on your website. I talked about the fold and call-to-action buttons in the provided link. Since I already discussed the importance of these buttons, I will just summarize it again. Basically, your website provides information about a service or product that you provide. Once the user is informed, they can make an informed decision using a call-to-action button. These buttons are meant to convert users to either contact you with more questions or make a sale. Without performing an action, users will not convert and that is detrimental to your website. Since the goal is to get users to do something, you need these buttons on your pages. You can create these buttons without the custom HTML but sometimes you want to make something special that you cannot with blocks.

Writing the Code First in Code Pen

Here is the code that I written on Code Pen:

• https://codepen.io/webdevelopertuan/pen/YzaPdzP

I wrote the code using HTML, CSS and JS. You need all three languages to get this to work. The HTML is needed to create the actual buttons themselves. The CSS is used for styling and positioning. Finally, the JS is used to make the buttons click to somewhere. In this example, one button is used for calling a phone number as a contact number and the other button goes to a page. I chose Google.

What Is Code Pen?

Before I get into the details of the code and how to transfer them to Code Pen to WordPress, I want to talk about Code Pen some more. Code Pen is a great way to write front-end code and share it with others. This makes it easy to provide a safe environment so that you do have to actually write any code on either your website so somewhere else where access is sensitive. Since Code Pen does only front-end code, then everything runs off a web browser and does not need a server. So the code written here is perfectly safe to run because it does not have to be uploaded somewhere.

Some Caveats to Consider When Using Code Pen

Something that you need to be aware of when using Code Pen is that I am only sharing a demo of a concept. This demo will more than likely need to be modified to work on your own website. If you take the code as-is, then it might render differently in your website because your website is running under a different environment than Code Pen. So you will need to adjust the code once you transfer it over to WordPress. This should not be hard and will give you an understanding of how to integrate the code.

Using custom blocks to create call-to-action buttons is something that you can probably do with just blocks alone. However, if you want them to look exactly a certain way, then you might need to create your own using code. This is why I said that the block editor is great for basic layouts. Once you start wanting more than what the blocks can do, then you will want to write your own custom HTML blocks. So that is what the purpose of this article is.

Now that I have the caveats covered, it is time to talk about the actual code in Code Pen.

How Does the Code in Code Pen Actually Work?

Now I will discuss how my code works. I will go over the HTML, CSS and JS as best as I can so that you understand what it all does. This explanation would be a good springboard for those who are looking to get into the front-end.

HTML

The HTML uses div, which are just containers used to hold the other parts of your HTML. So we have containers that hold other containers which organize everything and make everything separate from each other. Then we have a <h1> tag for the heading and the two buttons. The CSS classes “cta-container”, “buttons-container”, and “button” are used for styling in CSS. You also see that I created custom properties for each button. One has a telephone number to call for help and another that can send someone to a page. As I mentioned earlier, I chose Google. That is pretty much it for the HTML, next is the CSS.

CSS

I used flex boxes in CSS in order to create the call-to-action buttons. I like using flex because it is a great way to place elements next to each other, or if you like, side-by-side. You will see that I always start with styling the outermost HTML element first, which is “cta-container”. You see that I take this outermost container element and give it a nice blue background. Then I position it with some width and margin. I give it a width of 50% so that it only takes half the width of the screen so that it is only too long. Then I use margin to center it. Then padding is used to add spacing inside the container so that the buttons do not touch the edges. 

Margin: Spacing Around Elements

A basic part of design is giving ample spacing around your elements for not only readability, but also so people know when elements start and end. This becomes important for clickable buttons so that people can tell how large they are. If you make buttons too small or do not leave enough space around them, then they will be hard to click. This is more apparent in mobile where you do not have a mouse cursor that is small and selects a precise location on a screen. Instead, you have your finger which does not have the precision of a mouse cursor and therefore requires larger buttons that are easy to click on without clicking on anything else. This is basically what margin is. Margin is the spacing between your buttons and around your container so that you can actually click on objects easily.

Hover States: Desktop Versus Mobile

When you move your mouse cursor over the buttons, you notice that the background color of the button changes. This is done using the “hover” pseudo-class. That is what the “.button:hover” is in the CSS. This allows you set CSS values to properties only when the element with class “button” is hovered or mouse overed. In this case, I chose to change the background color to a lighter shade of green. I also decided to change the mouse cursor from the default triangle pointer to a hand. This is the same hand cursor that you see when you hover over links. The change in mouse cursor denotes that the button is clickable. The change in background color also assists in making this even more visually apparent. That is why the color needs to change along with the mouse cursor. The reason why is that people can see the color change easier than a mouse cursor change. Also for mobile, since there is no mouse cursor, you need to have a way to show that you are on button. However for mobile, the change in background color occurs on a long press because again, no mouse cursor means no actual hover state or event. You get a long press with your finger instead.

Padding: Spacing Within Elements

The other CSS here is used to add padding, which adds spacing inside elements. This is the opposite property to margin, which adds spacing outside elements. Padding, just like any type of spacing, adds readability because it moves elements away from the edges, preventing content from touching it.

JS: Make Your Buttons Take Action

Code Pen supports jQuery, which is great because jQuery is used a lot when writing JS. The JS here is very simple. All that I have done is take any element that has a class “button” and binded a click event to it. In the HTML, each button has a URL attribute set to a value. That value is used to tell the button what URL goes to when clicked on. So I use jQuery to access the URL attribute and then save it to a variable. Then I use the function window.open(url, target) to open the button’s URL in a new tab. The first parameter is the actual URL and the second one is the target which is “_blank”. This target just means to open the URL in a new tab.

Experiment With My Demo

So that is pretty much the code to create the most basic call-to-action buttons. Feel free to change the values and get acquainted with modifying the code. See how much you can change and make it look a lot different that what I created. I would start with simple changes like the text in the HTML. Then try changing the colors in the CSS. Once you get more comfortable, see if you can add a third button. Although in most cases, two call-to-action buttons are recommended. I am just giving you an exercise to see if you can do it. If you do want to try to add a third button, then you will need to reduce the button’s width from 35% to a smaller value. So basically how you calculate this is that you take 100%, which is the full width of the entire outermost container and divide it by three for three buttons. So 100% divided by 3 is about 33%. Then you have to account for spacing around the buttons, think margin. So you might have to set the button width to somewhere between 25% to 30%, a value lower than 33% to account for spacing.

Transferring the HTML to a Custom HTML Block in the Gutenberg Block Editor

Now that I have explained most of the code used to create the call-to-action buttons, you need to transfer that code over to WordPress. Let us start with the HTML. I recommend that you create your custom HTML block inside a reusable block. This way you can reuse your custom HTML on other pages without having to copy and paste the code over and over again. If you ever need to change the HTML, then you just need to change it in one place. First, create a reusable block. Then create a custom HTML block and add your HTML there. Save and then the HTML is done. Next we have to add the CSS and JS to WordPress.

Transferring the CSS Over to WordPress: There Are Two Ways

There are a couple of ways to add CSS to WordPress:

1. WP Admin > Appearance > Customize > Additional CSS
2. Custom CSS and JS Plugin

I will discuss both ways and let you know what I think about each method.

Using the Additional CSS Section

This way is good if you want to keep all of your CSS all in one place. This also depends on how much custom CSS you plan to write. If you think that you will want to create your own HTML custom blocks and need to organize them in separate CSS files, then use the plugin. If you are only going to write a little bit of CSS, then just add it here.

Using the Simple Custom CSS and JS Plugin

You can add your CSS using this plugin, Simple Custom CSS and JS. You will need this plugin to add JS anyway so you might like adding your CSS using this plugin also. What I like about this plugin is that you can create CSS for different things and then toggle them on and off. This is good because if you turn off any of your custom HTML blocks that use CSS, you can toggle them off without having to comment them out if you use the additional CSS section.

Additional CSS Section Versus Custom CSS and JS Plugin: Which is Better?

Short-term, I think that using the additional CSS section is better than the plugin. It just works and you can use the plugin for JS only. Long-term, if you want organization then use the plugin because you can then create different CSS files for each purpose. Code files can get very long, very quick. So you might want to consider the plugins as your blog grows and you create stuff that the blocks cannot alone.

Transferring the JS Over to WordPress: Using the Simple Custom CSS and JS Plugin

Transferring the JS from Code Pen to WordPress is just as simple as it is for HTML and CSS. In this case, you will use the same plugin, Simple Custom CSS and JS as was mentioned earlier. The good thing about most WordPress themes is that they usually include jQuery. Even minimal themes like GeneratePress use jQuery. That is how good jQuery is. I wrote an article on just how much I like jQuery. Once you transfer the JS over then everything “should” work. Remember how I said that my Code Pen demo was just an example? You also need to style it to match your design. So you will probably need to make modifications accordingly to make my demo work with your website. Of course, you need to make sure that your demo looks good before you transfer everything over.

Summary

This article has a lot of details on creating call-to-action buttons using Code Pen and the Gutenberg HTML custom block. The reason why I chose to create call-to-action buttons is because of their importance of converting users to perform actions like contacting you for information or buying a product. Code Pen IO is a great place where you can write HTML, CSS and JS and create demos and widgets outside of WordPress. These demos are shareable with people so you can show others what you have done and see if you want some feedback on it.

The order that you code in is HTML, CSS and JS. You write your HTML first because you are creating the container and structure for your button. Then you need to style the buttons to look nice with colors and spacing. I recommend using flex in CSS because it is great for arranging multiple elements together. Then you use JS to write some jQuery to activate the buttons and send them to a URL.