Do you want to add these awesome HTML button links to your website content?
You can design your own buttons with beatiful customization options right on your website and you can link them to any URL.
Today, I am going to show you a new and simple way to add user-friendly HTML buttons links to your website by either a WordPress plugin or by adding just 2 lines of HTML code.
It is a free and easy to use way of adding button links.
Let’s get started………
A Quick Overview of this Awesome Post
HTML button links are simple and visually appealing HTML buttons that work like links.
HTML button links can link to the same page or any other page in a new tab.
HTML links are clickable anchor text or image hyperlinks to take the user to another page or URL.
We use these HTML links for both internal and external linking on our websites.
Here is an HTML code to make a simple link:
<a href=”http://linkaddess.com”>Link anchor text</a>
HTML button is a clickable HTML element that performs a specific action.
Buttons are more appealing and convincing to click than simple links.
Here is an HTML code to make a button:
<button type=”button”>Button Text</button>
HTML button links:
When you combine visually appealing nature of buttons and the nature of HTML links, you get a new thing called button links.
You have no HTML tag for button links as they are not inherent HTML elements.
Here is an example of button link:
As you can see, it is, in fact, a link but looks like a button.
If you add button links to your website, you gain the following benefits of HTML button links
Improved content look:
Human visitors love great visuals. HTML button links are great at the appearance. A well-designed button link with a nice background and text color can greatly improve the look of your website to make them stick with you.
Clear call to action buttons:
Simple links are part of body text and are easy to be overlooked. Every website owner wants his visitors to click on “Buy Now link” or “affiliate link”.
Whatever the action you want your visitors to take on your website, button links are way better than simple links we use on our websites.
Grab the attention of customers:
People consume your content, get value and just leave your website if you don’t grab their attention.You should bring their eyeballs to what you want them to do.
Add HTML button links to decrease overlooks and grab your customer’s attention.
More affiliate links clicks and more sales:
Once you grabbed the attention of your customers, you get improved affiliate link clicks. No need to mention, improved affiliate link clicks lead to more sales and more income.
They not only grab the attention of your visitors but also divide your content into parts for better reading experience. For this to happen, you need to add button links at the end of each section like “click to tweet this technique” etc.
Add Click to tweet sharing buttons:
Clicktotweet is a service that provides tweetable links to add to your content for better sharing.
Convert these shareable links into tweetable buttons links to walk towards viral shares.
Now let’s see how can you add these awesome HTML call to action button links to your website.
If you are on a WordPress website, you are just a plugin away to add this functionality to your website.
There is a lesser known WordPress shortcodes plugin:
The shortcodes Ultimate (check plugin details)
This is my favorite plugin that provides various shortcodes to make awesome visual changes to my WordPress website content.
You will use Buttons shortcode of this plugin to convert your simple links into HTML button links.
Let’s get started…..
Step-1: Install the Shortcodes Ultimate Plugin:
Install the shortcodes ultimate plugin through WordPress dashboard either by searching for its name or by downloading and uploading the .zip file to your plugins directory.
If you don’t know how to install a WordPress Plugin, here is an awesome guide by Scott Chow
After installing the plugin, you will see insert shortcode button on your WordPress editor toolbar.
You will convert your links to HTML button links by simply inserting buttons shortcode.
Step-2: Convert simple links into awesome HTML button links:
1. Select the text (anchor text) from your post which you want to convert into button link.
Click on Insert shortcode button from the toolbar, following window will open.
2. Click on the “Button(with love symbol)”, the Button customization options window will show up as follows
You will have the following HTML button customization options:
Link: The URL of the destination page where you want to take your users to after clicking this link button.
Target: You can select the button link to Open in the same tab or in a new tab
Style: You can select any one of the following button styles
You can see a preview of each selected button style at the bottom of the window.
Background: You can select any of the button link background colors with the color wheel
Text color: Select the text color of the button link from the color wheel
Size: You can customize the width of the button link to any size in pixels
Fluid: Yes or No option.Select Yes for 100% width of the button text.
Centred: Select yes to center the button in the post
Radius: You can set the radius of the button to make it a rounded corner button for great look
Icon: You can add icons to your button along with the text.
Select from the icon picker or upload your own icon using media manager option
Icon Color: Set the color of the selected icon
Text shadow: set the text shadow of the button
Description: You can write a small description of the button if you want to do so.
Extra CSS class: If you want to further style the button(other than the provided options above), just give a CSS class name here and write your CSS code in your child theme to style it further.
By using the above customization options, style your button link the way you want and finally click on the Insert shortcode button at the bottom of the window to insert it into your post.
You can also save your button styles using Presets as shown in the screenshot.
The Shortcodes Ultimate plugin adds so many visual improvements along with buttons.
So, I recommend installing this plugin for other reasons too.
But, if you don’t want to install any plugin for the above feature, you can use the following HTML code for creating link buttons.
Link buttons HTML code using form structure:
<form action=”http://buttonlinkurl.com” method=”get”><button style=”width: 500Px; height: 50px; background-color: yellow;” type=”submit”>Button Link Text
The preview of the above code looks like this:
Simply paste the above HTML code wherever you want to add a link button.
Replace “http://buttonlinkurl.com” with your own linking URL and Button Link Text with your button anchor text.
Adjust the inline styling as per your needs using CSS code.
You can add this code in WordPress editor text tab beside the visual tab where you write content.
HTML button link code using link structure:
This is the simple HTML a: link structure with button tag in the anchor text part.
<a href=”http://yourbuttonurl.com/”> <button style=”width: 500px; height: 40px; background-color: red;”>Button Link Text
The preview of the above code looks like this:
Use your own CSS code to style the above HTML button links.
HTML button linking is a great approach towards improving your user-engagement.
Use these buttons tactically wherever required to grab the attention of your visitors.
Moreover, by installing shortcode Ultimate plugin, you can add tons of visual improvements to your website such as adding dividers, light boxes, columns, colored notes etc.
Share this awesome technique with your followers if you like it.
Feel free to comment if you get any doubts.