Buttons are a small portion of a website’s complete design, but they influence a user’s action onsite. For this reason, it is important not to overlook them in your overall plans and understand how a user’s actions are affected by a button’s aesthetic. Different types and looks are best for certain situations.

Types of Buttons and Their Uses

Raised Button

The most common is a raised button, which indicates you’d like users to take an action (most likely an important one). It stands out since it has a border that lifts the button, adding dimension to an otherwise flat surface. These buttons, preferably, display the actions of the user, changing based on if the buttons are pressed or if the user hovers over them.

Examples of raised buttons

The best way sites can capitalize on the command of raised buttons is by using them for CTAs (Call to Action). Most of the time, there are multiple CTAs on a page. Some will be conversion actions, while others will serve a less important role.

Use raised buttons for those primary actions you want users to take and different styled buttons for the less prominent actions.

In the below example, Treat, a mobile vet app, used a raised button to bring attention to the most important CTA on the homepage – downloading the app. While they use a ghost button (which we will describe next) for the secondary action.
An example of a raised button CTA and a ghost button CTA.

Last Pass uses color perception combined with raised buttons to guide the user to the preferred actions. The main CTA is enclosed in a red raised button, while the secondary actions are enclosed in dark grey raised buttons. The style of button guides the user to the prominent actions, while the button color elicits the user to feel that the “Get LastPass Free” action is most pertinent.

An example of varying color raised button CTAs.

Ghost Button

Ghost buttons have a border and shape, but a transparent background. They look like raised buttons, only with the same background as the page. These buttons have become popular since they complement site aesthetics and lend themselves to creative styling. They can also change states like a raised button, reflecting the action of the user.

Ghost buttons are commonly used to support the main raised button CTAs, denoting a secondary or tertiary action. If there are multiple actions on your site, consider using a ghost button for the less important actions that still need a dedicated button.

Spotify using raised buttons and ghost buttons.Spotify's ghost button fills white when in hover state.

Spotify uses a raised button and a ghost button for their homepage CTAs. The raised button is used for the most likely action – free stuff – and a ghost button for the secondary action – paying for Spotify Premium. They also changed the look of the button based on its state. If the button is static it is transparent, but if a user hovers over it, the button fills white.

Flat Button

A flat button has no border or lift, but it does fill when a user clicks on it or hovers. When a user is not performing an action, it looks like normal text on a page. This button style is mainly used in dialogue boxes and within apps. Using a flat button has the benefit of having the focus solely on the content, since its minimal style suppresses distractions. It is good for utilitarian functions like accepting or declining options.

An example of flat buttons on Google Maps.

Toggle Button

Toggle buttons allow users to change the button state between two or more settings. The Facebook Like button is a popular example of a toggle button, where users can change between “like” and “unlike”. Toggle buttons are common inside toolbars and settings where options can be turned “on” or “off”. These buttons can either be text or icons, but make sure the icons are easily recognizable and relevant to the action.

Example of a variety of icons used for toggle buttons
Toggle buttons in toolbars often rely on icons, so ensure users understand what the button does based on the icon.

Floating Action Button

The Floating Action Button (FAB) is described in Google’s Material Design so now a name can be put with the distracting button seen on many Google apps. The FAB button lives above the content and when pressed offers actionable options. This button is prevalent on mobile, but there are FAB-like buttons on desktop, especially for actions like live chat.

Example of a floating action button on a cellphone

Tips for Creating Successful CTA Buttons

Now that you know what types of buttons are available, use best practices to help promote clicks on your buttons.

1. Write Compelling Text

By far the most important aspect for conversion is the copy within the button. The copy should be hyper relevant to content around the button. Keep the CTA short and use action verbiage. If the copy is more than 10 words, it’s too long. Some of the best converting buttons use simple verbs, but with an obvious action like “get” or “download”. Also, keep your branding consistent like using the correct typography and voice when writing button copy.

Action verbiage on a CTA button.

2. Choose the Correct Color

Many studies have been done to find out which color produces the most conversions. The general consensus was red spectrum buttons performed better than their cooler color counterparts, but the focus should be less on the color and more on making sure the buttons stand out. The best way to do this, while staying within your branding, is to make buttons contrast with the background. Use complimentary or triadic colors that match both brand and message.

Netflix has contrasting buttons with their background
Netflix stays within their branding and keeps their buttons contrastive on a dark background.

3. The Placement of Buttons Make or Break a Conversion

CTA buttons should follow the logical path of the user’s eye. A user shouldn’t jump to a different portion of a page to follow through with an intended action. If you’re talking about a very informational e-book, for example, the download button will follow after the content. It will also be in an expected place so the user can convert.

Buttons should also not be competing for space or attention. Each CTA should stand-alone with enough white space between different topics on the page.

In the example below, splitting up the main CTA and the secondary CTA does not take advantage of page real estate. Instead, placing the main CTA, “Free Trial”, above the fold and outside of the header would help centralize a user’s attention.

Example of poorly placed CTA buttons.

4. Use Smart Iconography on Your Buttons

Sometimes there are small icons, usually arrows, inside the button to give extra context to users when they click. These can be helpful to support whatever action you want a user to take, but make sure its logical and complements the action.

  • An arrow pointing downward alerts the user that a drop down extension could pop up, or there’s a download available.
  • An arrow pointing to the side could let the user know that they will move to another page when they press the button.

Avoid pairing an icon with inappropriate actions (like adding a downward arrow when nothing will change) when a user presses the button.

Arrows inside button.
If icons or arrows do not reinforce the action, leave them off.

5. Provide Button Feedback

Raised buttons change based on specific actions. When the user is not engaging with the button, it remains static with no aesthetic change.

  • When a user hovers over a button, the button can change color confirming to the user that it is clickable.
  • When the user clicks the button, it depresses like a tangible button would.

This small element provides an optimal user experience and reinforces the idea that users should click through.

Different button states depending on the user's actions.

The small button has a big impact on how the user navigates and eventually converts onsite. By spending some design time to properly create beautiful, but optimized buttons, you can ensure that users will have the best experience on your landing pages.

Leave a Reply

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

Read Related Posts