23 Comments
Hello everyone,
This video is my first training video on using html code in WordPress to create your own Call to Action or CTA buttons. You can add these buttons anywhere you like in your posts or pages to show your site visitors where you want them to go next.
Sorry, there is no sound! I have no microphone at the moment, but added written instructions in the video as I went through the steps. You can find the HTML Color picker at a free resource for learning HTML and CSS code in the link below or just look up HTML color codes..But, I find it pretty helpful, so I'm adding it here...
https://www.w3schools.com/colors/colors_picker.asp
HTML code to add a basic button
Below are a few images of the HTML code needed to add into your post where you want to add your CTA button.
Highlighted in yellow is the area you'll need to add your affiliate link or website URL.
<a style="display: block; height: 80px; width: 300px; background: #ff3300; color: #000000; text-align: center; font-weight: bold; font-size: 250%; line-height: 90px; font-family: Arial; border-radius: 20px; text-decoration: none;" target="_blank" href="https://youraffiliatelink.com">Click to Order!</a>
Copy the code above exactly as shown, into a "Custom HTML" block when using the Gutenberg WordPress editor. Except the highlighted part...add your own affiliate link or website URL there to get the orange button shown above with your own CTA link. *The part of the code withis optional.
You won't need it unless you want your CTA to open in a new tab.
Change the Shape of Your Button
In the image above I've highlighted numbers that were changed in order to change the shape of this type of button...you can change them to whatever numbers you like to make your own button shape or you can just copy the code below to get the exact button shown above...
Let me know if you have questions...I'll be happy to help out as much as I can. Thanks for watching!
<a style="display: block; height: 70px; width: 300px; background: #ff3300; color: #000000; text-align: center; font-weight: bold; font-size: 230%; line-height: 80px; font-family: Arial; border-radius: 50px; text-decoration: none;" href="https://youraffiliatelink.com/">Click to Order!</a>
Join the Discussion
Reply
Freedomseekr
Premium
Freedomseekr
Premium
Hi Marisa,
Thanks for checking it out and commenting!
However, I thought I should let you know that WordPress decided to update things... if you're using the new editor in Wordpress, the Gutenberg block editor, there are now also button blocks you can use to make buttons!
However, some people prefer the classic editor. So if you're using classic, these codes should still work. They also work last I tried in the new block editor, as shown in the video, but it's a lot easier to just use the button blocks there.
Hope that helps...let me know if there are any questions you have :)
Best wishes ~Sherry
Thanks for checking it out and commenting!
However, I thought I should let you know that WordPress decided to update things... if you're using the new editor in Wordpress, the Gutenberg block editor, there are now also button blocks you can use to make buttons!
However, some people prefer the classic editor. So if you're using classic, these codes should still work. They also work last I tried in the new block editor, as shown in the video, but it's a lot easier to just use the button blocks there.
Hope that helps...let me know if there are any questions you have :)
Best wishes ~Sherry
Caruana
Premium
Hi Sherry, many thanks for this. I did find the button blocks and they are easy to set up, so thanks again for your kind help. Marisa
Freedomseekr
Premium
Freedomseekr
Premium
Hi Daniella,
Thanks for checking it out! Great to hear it's helpful for you!
You could try adding the center code around the whole button code, which I'll add here as an image. I've been adding the <center> code to it in the past and it worked fine for me....
<center>your button code goes here</center>
However, if you're using the new block editor, Gutenberg WordPress, there is now an option there to make buttons with their button editor block. If you click the plus sign in the upper left corner of the WordPress editor you can find it under the menu "Layout Elements." Click the drop down arrow there and you'll find the button editor....
I've went in there and took a quick screen shot to show a bit more...hopefully it'll show up clear enough. Not sure if you're using the Classic editor or the new Gutenberg block editor however...so, if you're using the Classic editor, you won't find it and you'll just need to add the center code around your button html code....
Anyways, let me know how either one works for you or if you have any questions...
Hope this helps you out...
Best wishes :) ~Sherry
Thanks for checking it out! Great to hear it's helpful for you!
You could try adding the center code around the whole button code, which I'll add here as an image. I've been adding the <center> code to it in the past and it worked fine for me....
<center>your button code goes here</center>
However, if you're using the new block editor, Gutenberg WordPress, there is now an option there to make buttons with their button editor block. If you click the plus sign in the upper left corner of the WordPress editor you can find it under the menu "Layout Elements." Click the drop down arrow there and you'll find the button editor....
I've went in there and took a quick screen shot to show a bit more...hopefully it'll show up clear enough. Not sure if you're using the Classic editor or the new Gutenberg block editor however...so, if you're using the Classic editor, you won't find it and you'll just need to add the center code around your button html code....
Anyways, let me know how either one works for you or if you have any questions...
Hope this helps you out...
Best wishes :) ~Sherry
mechidor
Premium
Hi there,
Thank you so much!
I didn't know that Gutenberg feature buttons. It's just awesome!
I hope they will provide the possibility to make them bigger in the next update:)
Thank you again!
Thank you so much!
I didn't know that Gutenberg feature buttons. It's just awesome!
I hope they will provide the possibility to make them bigger in the next update:)
Thank you again!
Freedomseekr
Premium
Hi Daniella,
You're very welcome! Happy to hear I could be of help. It sure does make things easier than adding codes.
I happened to notice it awhile ago by accident, not sure when Gutenberg started this button feature since I never noticed it when it first came out. Yes, that would be awesome if they would have an option to make them bigger if someone wanted...unless that's already another option hiding somewhere, lol. If I happen to find anything I'll let you know!
Best wishes :) ~Sherry
You're very welcome! Happy to hear I could be of help. It sure does make things easier than adding codes.
I happened to notice it awhile ago by accident, not sure when Gutenberg started this button feature since I never noticed it when it first came out. Yes, that would be awesome if they would have an option to make them bigger if someone wanted...unless that's already another option hiding somewhere, lol. If I happen to find anything I'll let you know!
Best wishes :) ~Sherry
mechidor
Premium
Hi Sherry,
Yes, maybe it is hidden somewhere:) If I find out, I let you know too. Thank you again!
Yes, maybe it is hidden somewhere:) If I find out, I let you know too. Thank you again!
Freedomseekr
Premium
Yes, you sure could do that and I'd suggest linking the button to a page with a contact form specifically for subscribing to your email list. There are quite a few free plugins that you can make contact forms easily within WordPress, then add the code for the form in that page.
Hope that helps...let us know how it works for you or if you need help with anything too.
Best wishes :) ~Sherry
Hope that helps...let us know how it works for you or if you need help with anything too.
Best wishes :) ~Sherry
jillxyz
Premium
Thank you Sherry. I’m new to plug-ins and buttons however with the support I’m getting I’ll have it up and running shortly. Thanks again. Cheers AJ
Freedomseekr
Premium
Good question, which I'm glad you asked...I knew I forgot something, lol! You can center your button by adding the code for center around the whole code...hopefully that helps, I'll add a screenshot of the code here too.
<center>button code</center>
Let me know how it works for you, Thanks for checking it out!
<center>button code</center>
Let me know how it works for you, Thanks for checking it out!
jvranjes
Premium
OK, this works.
One more question. Any idea what is better i) such a code or ii) a clickable image with a call to action text? I have been using the latter all the time.
One more question. Any idea what is better i) such a code or ii) a clickable image with a call to action text? I have been using the latter all the time.
Freedomseekr
Premium
Awesome to hear it works for you! Actually, I'm just beginning to add html buttons to some of my posts...
I've always had the best results from text links so far, but then again I have more text links than clickable images with CTA text. I thought I'd try html since you can always change things in the code itself to change the look of the button, unlike an image, where you won't be able to change it's color or shape too easily.
I'm definitely going to keep track of which one seems to perform better though in the days ahead!
I've always had the best results from text links so far, but then again I have more text links than clickable images with CTA text. I thought I'd try html since you can always change things in the code itself to change the look of the button, unlike an image, where you won't be able to change it's color or shape too easily.
I'm definitely going to keep track of which one seems to perform better though in the days ahead!
esteadman
Premium
Excellent, using it in my review posts as a Buy Now CTA button. Works great with Gutenberg WordPress. Add it as a Reusable block and just change the affiliate link each time you insert it. That way you don't have to keep coming back here or a previous post to copy/paste the code.
Only one comment regarding <center> code. This code is obsolete because it is browser dependant. In fact it didn't work at all for me in my Chrome browser.
The way around it is <...margin: xxpx or xx%; ...> added after <...display: block;...>. Seems to work with every platform I've tried as well as in AMP using % instead of px.
Thanks for the great post. Next time audio would make it even better. Keep up the good work.
Ed
Only one comment regarding <center> code. This code is obsolete because it is browser dependant. In fact it didn't work at all for me in my Chrome browser.
The way around it is <...margin: xxpx or xx%; ...> added after <...display: block;...>. Seems to work with every platform I've tried as well as in AMP using % instead of px.
Thanks for the great post. Next time audio would make it even better. Keep up the good work.
Ed
Freedomseekr
Premium
Thanks for checking it out Ed! Glad to hear it's working for you and you can use it in your review posts!
Wow, that is an awesome tip to add it as a reusable block in Gutenberg! I'll definitely be doing that, I hadn't even thought of that! It'll help save a lot of time since it's impossible to remember it all and I'd have to come here or a previous post to copy/paste it as you said.
Glad you also mentioned that about the <center> code, I hadn't realized it's browser dependent. I pretty much always use Firefox, so this is very good to know! I'll have to change those over on mine then to the code you mentioned after <...display: block;...> <...margin:xxpx or xx%;...> Thank you so much for letting me know!
I'll have to try and update this if I can ASAP about that center code too, but in the meantime, hopefully people will notice your comment about it if they happen to try making a HTML button.
Yes, I hope to get audio sometime before the next one...it'd definitely make it a bit easier to do I think too.
Thanks again, Ed! Let me know if you find any other issues that you might come across while using it. I hope it helps you get many sales coming in with that CTA button on your reviews!
Best wishes :) ~Sherry
Wow, that is an awesome tip to add it as a reusable block in Gutenberg! I'll definitely be doing that, I hadn't even thought of that! It'll help save a lot of time since it's impossible to remember it all and I'd have to come here or a previous post to copy/paste it as you said.
Glad you also mentioned that about the <center> code, I hadn't realized it's browser dependent. I pretty much always use Firefox, so this is very good to know! I'll have to change those over on mine then to the code you mentioned after <...display: block;...> <...margin:xxpx or xx%;...> Thank you so much for letting me know!
I'll have to try and update this if I can ASAP about that center code too, but in the meantime, hopefully people will notice your comment about it if they happen to try making a HTML button.
Yes, I hope to get audio sometime before the next one...it'd definitely make it a bit easier to do I think too.
Thanks again, Ed! Let me know if you find any other issues that you might come across while using it. I hope it helps you get many sales coming in with that CTA button on your reviews!
Best wishes :) ~Sherry
jvranjes
Premium
This margin addition shifts both vertically and horizontally so this is not good. How to shift only horizontally? Center command adds to much vertical space, hard to find a solution. It could be margin-left: xxpx, but how to know that it will always be centered on any screen?
Freedomseekr
Premium
Hmmm, good question....it is hard to find a solution for these problems, especially with so many screen sizes. Definitely something to look more into! Thanks for pointing it out!
I wonder if adding a custom CSS code...well, I'd have to look into it more again, when I have more time. Anyways, I believe I remember there's a CSS code to add into the Custom CSS to change colors of the buttons automatically throughout the whole site...I wonder if there's one for keeping the button centered on any screen?
I wonder if adding a custom CSS code...well, I'd have to look into it more again, when I have more time. Anyways, I believe I remember there's a CSS code to add into the Custom CSS to change colors of the buttons automatically throughout the whole site...I wonder if there's one for keeping the button centered on any screen?