VictorVijay

Convert Simple Links to HTML button links (for better user-engagement)

How to add HTML button links to your website

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.

Interesting………

Let’s get started………

What are HTML button links?

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:

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:

HTML button is a clickable HTML element that performs a specific action.

HTML button can perform actions like submitting a form, executing a javascript function, alerting users etc.

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.

Why should you add button links to your website content:

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.

Improve readability:

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.

Want a free valuable advice on improving your blog on SEO, Design, and Income?

(I will visit your blog and will personally advise you on improving your blog’s income for free)

How to add HTML button links to WordPress 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)

Shortcodes Ultimate plugin web snap

Shortcodes Ultimate Plugin direct download link

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

How To Install WordPress Plugins

After installing the plugin, you will see insert shortcode button on your WordPress editor toolbar.

inserting button link to WordPress post

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.

Selecting buttons shortcode

2. Click on the “Button(with love symbol)”, the Button customization options window will show up as follows

Button link shortcode customization options

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

  • Flat
  • Ghost
  • Soft
  • Glass
  • Bubbles
  • Noise
  • Stocked
  • 3D

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.

OnClick: Leave this blank if you don’t want to add any javascript actions to the button.

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.

clicking insert shortcode button

You can also save your button styles using Presets as shown in the screenshot.

HTML code for converting links into HTML link buttons:

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.

Final thoughts on 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.

Subscribe to learn SmartBlogging that makes Momey

Enter your email address to subscribe to this blog and get first time access to awesome posts right in your inbox

Updated: November 5, 2017 — 5:04 pm

The Author

Vijay

Vijay is a tech savvy guy working as Assistant Manager with a Hydro Power Company owned by Govt of India . He is a passionate blogger committed to build an awesome online resource to solve day to day problems of other bloggers. He transparently shares working techniques to take your blog to the next level.You can contact him by filling the contact form

Leave a Reply

Your email address will not be published. Required fields are marked *

VictorVijay © 2017 || Back to top || Privacy Policy || sitemap