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...
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>