Most UX design on the call-to-action button (CTA) on the landing page seems like less persuasive. Indeed there is a theory to design a button, but the decision to click or not is usually based on the visitor's interest.

In Complete Landing Page Guidance for Ecommerce Website , it is explained that the main component to make the visitors interested is the presence of a call-to-action button.

UX button design has changed in the last 10 years. Design trends that are widely used usually combine the color and shape of the button with the page color. It may be pretty good aesthetically, but shouldn’t this call-to-action button stand out and get visitors interested to click?

You must have found not every button is designed for call-to-action. Sometimes the button only aims for one simple action, such as the “send” button on the comment section. This article will discuss five types of button and the view of visitors in interacting with each button.

This type of button was well known on websites in 2004, where the design of digital development is still very simple.

This button really looks and feels like a button in physical form, just looking at the display will give a nostalgic feeling into 16 centuries in the previous time. This button is outdated, old, and it is time to enter a museum, not to your site.

Many visitors were hesitant when filling out such an old-fashioned form. They are questioning if the form is safe, if their data does not fall into the hands of irresponsible people.

Indeed, this is a standard/default button, and the function is the same as other buttons, but if you force to use it, do not blame if your e-commerce site is lack of engagement.

Flat button is usually a strikingly colored square or rectangle with words on it. It is usually in the form of a banner or just using persuasive words.

Recently, flat design buttons are very popular in many e-commerce sites. Many designers like using this type of button since it is easier to be adapted to the overall web design.

Let’s see why many designers and visitors love this flat button design. Although this flat button is not wrong either, some people think that a button should be similar to a button in physical form with a 3D design.

First (Up left) is a flat CTA button which looks like a banner. Up right with a few improvements. The rounded corners make it look more like a button.

The bottom-left one is much nicer, the raised call-to-action button. By giving shadow effect, this button appears to have depth, indicating that it is designed to be clicked.

To get a high conversion rate on e-commerce web, especially on the landing page, many people believe and want to click the bottom-right button. This type of button is very popular since it looks attractive and effective at getting visitors to take action on your website.

However, this button does not need to be used to fill the form. Many designers prefer to add a great testimonial under the form button to increase trust.

Although ghost CTA buttons (or buttons that are just in the form of a box) more often be used in UX design, the appearance that is over-simplistic is not recommended, especially for e-commerce websites that require a stronger call-to-action strategy than blogs.

An example of a “ghost” button that is interesting is Haruki Murakami’s on his website. The buttons look really good and harmonious with the overall web design.

Even though the mix of designs looks really beautiful, but it looks like there is something wrong. For the “Available Now” button, it does not look like a clickable button. In fact, it looks like an element that conveys information, not a call-to-action.

By the appearance that is nearly no different from any other element, the type of this call-to-action button can arguably be useless because it is inconspicuous and not recommended on the e-commerce web.

Shouldn’t this type of call-to-action button be used at all? Not really, it is based on the context and their lay.

This type of CTA button is very effective when it is used on e-commerce web side by side with the second button, with a more persuasive emphasis. As this type of button is lighter visually, so if it is paired with more striking button design, automatically it will give a second priority impression.

By this comparison button, the visitor will prefer to choose the button that you design more strikingly.

There is a second element (or dimension) that is important on this type of CTA button if it is used on e-commerce web. Things that make visitors interested to click is not only about the button appearance but also the interaction.

As the button appearance that makes people curious. What is button? Could it be clicked or not? Make the visitors think that “I must click it to test if this box is really a button.”

People tend to be doubtful before clicking and using a one-state button, moreover with no hover-state, so it can make the visitor more doubtful.

You can add a simple hover-state that underlines the words on this CTA button, or change the background color.

Although there are many changes that happen in design and UX evolution, a good CTA button principle still does not change a lot and there is no correlation with the trend. Here is good and simple practical tips to be applied on your CTA button design, especially on e-commerce web landing page:

The first point above summarizes the important point about this article: CTA buttons on e-commerce sites should be shaped as buttons physically. It is not only element design. CTA button UX design must be clear and invite the visitors to take actions.

When you are reviewing your website, start to fix buttons on your e-commerce web, especially on the landing page. For example, “Buy Now” or “Add to Cart” on the product page or subscription button on your bulletin. You have to remember that not all buttons must be the same, it depends on context and the usage.