We stand with Ukraine and our team members from Ukraine.

The Community Of Over 640,000

Home ›› Design ›› Designing the Perfect Button

Designing the Perfect Button

by Domas Markevicius
6 min read
Share this post on



Everything you need to know about what makes a button great.

Buttons are one of the main UI elements in interactive design. Some of the more complex interfaces can have hundreds of buttons on a single website. Most businesses measure their success by button clicks. So it’s crucial to communicate to the user how a button works and where it’ll lead them. Over the years, our design system has fine-tuned the craft of our buttons.

Buttons allow users to control the product and achieve their goals. It can help them navigate the interface, modify content or both.

Three examples. First example shows “home” button which navigates to home page. Second example shows “duplicate button which makes a copy. Third example shows “add new product” button which redirects to a new page and make new product at once.


As Google explains, a good button design follows 3 principles. It must be Identifiable, Findable and Clear. We keep close to these principles at Wix.

Making a button clear

A button must clearly communicate what it does, with zero space for interpretation. Text is the primary element that explains intention.

Of course, you can include an icon which helps to identify and understand the context. But without any text, it’ll lack full meaning. The text is a promise of what exactly will happen when that button is clicked.

Sometimes buttons need to include multiple messages, where the text and icon can even have different meanings.

A button with icon and label.
In this example “More Actions ▾”, the text indicates that here you’ll find more actions, while the icon indicates that the menu of more actions will display in a dropdown once you click the arrow.

Case study

In 2019 the OS Team at Wix decided to change the button hierarchy. When we first launched, our design system had buttons with text only in our primary CTAs. Any secondary CTAs we had on the page were indicated with just a button — no text. After our update, we turned all our icon-only buttons into text or text + icon buttons. This small change led to a huge increase in click rate for “Create New Folder”. The top bar actions next to the primary CTA got more exposure too.

This visual comparison shows how the upper layout won the test against the bottom layout:

Two textual buttons.
“Create New Folder” click rate significantly increased without harming the main goals.
Two buttons. One uses only an icon, second one appears with a text.
Before the change, when “Create New Folder” button displayed only the icon, few people managed their sites into folders.

Making a button findable

Actions must be located where users expect to find them. The main action must always be visible and positioned in the top area. Navigation actions can look neutral but also must be visible. Only the least important actions that don’t affect the main path (e.g. “delete”) can be hidden under popovers.

Two examples of buttons that open a contextual menu. The first example uses a label making it obvious what the button will do. The second example uses only an icon making it little know what the button will do.

Avoid placing tool actions with navigate buttons in the same list. Users might not expect to find buttons that are out of context.

A contextual menu with tool actions and navigation action
In this example, the “Category Manager” button is out of context. “More Actions” communicates that the menu will provide actions but doesn’t tell the user that there will be navigation buttons.

Making a button identifiable

Users must easily understand which interface parts are static and which are clickable. Wix uses blue color for all major actions. Lighter blues can be used only as the button’s background color.

Two examples of button placement and coloring. The first example has a distinct button because of its placement and color, the the second example shows the opposite making a button hard to see.

In some cases, like on colored backgrounds, the blue color can’t be used due to the contrast. Then, text, contrast and shape plays the major role in making the button look recognizable and distinct from the rest of the environment. Following Web Content Accessibility Guidelines helps to provide a good text contrast, so the majority of users will be able to read it.

A notification message with a textual button
Black action works well on colorful backgrounds. Underlined text makes it clear that it’s actionable.


Text is the primary element that explains the button’s intention. It should be clear, predictable and simple. Start with a verb to encourage action. Verbs must tell the user what happens once a button is clicked so they can predict the next step. Use simple language that will be recognized by any age group.

Two examples of button’s label writing style. Using verb sentences make the button obvious (e.g. “Upgrade to Premium”), while buttons labeled in nouns don’t encourage users to interact.

Case Study

Wix’s Photo Studio Team performed an A/B test which showed that users engage more when buttons are displayed with text. The application tested three layouts; icon only, text below the icon and text on the side. Versions with text won the experiment.

Two versions of vertical list of actions. First version uses icons and labels below. Second version uses only the icons.

After a failed test, the layout was reverted to the original.

A vertical list of actions with icons and labels. Labels are placed on the side of the icons.
This version shows the final solution used by Photo Studio. It solved the initial problem and led to a slight increase of tabs use.

This study showed that text plays a crucial role in making buttons clear and actionable.

Text in context

A button’s text should reflect the context. Make sure the user is aware what action is available. For example, alert modals appear fast and change the layout. Therefore, the potential actions must be very clear.

A modal, where main call to actions are labeled as “Move to Trash” and “Cancel”
The good example showing how both buttons are clear what they will do. The main button reflects the content’s title — it makes an accurate alert message.
A modal, where main call to actions are labeled as “Yes” and “No”
The bad example showing how buttons don’t explain what would happen if they’re clicked. A user must remember their previous actions to understand the context.

In modals that just state the facts, like “Success” or “Two users can’t edit at once”it’s ok to use less descriptive buttons such as, “Got it, Thanks”.


Icons help users understand the context. However, icons can often be misinterpreted. Icons don’t encourages users to take action in the same way text does. For this reason, you should use single icon buttons with caution.

Icon buttons work great for professional tools where a user will regularly click buttons and memorize them. Placing icons next to a button with text will increase the chance of being noticed by users.

Four buttons. One of the buttons appears with a text.
“Edit” button attracts the user’s attention to this button group. Mouse hovered icon buttons reveal their labels in a tooltip making it obvious what the icon button will do.

Case Study

Side navigation testing showed that Wix users engage more with drill-in buttons that have arrow icons.

Two side navigation versions. Initial version used to reveal icons on mouse hover. New version showed icons next to buttons always. It significantly increased user engagement.

This study shows how text and icons can give additional context when used together. This helps users understand what buttons leave the page and what buttons display more options.


Applications tend to have multiple actions. Some actions are always used, others just occasionally. Not every button needs full attention but all buttons must be discoverable. A good hierarchy means every action will be discovered easily when needed. There are multiple techniques on how to create a good hierarchy.


The most important actions must be put in the most visible area; at Wix it’s the top of the page in the right hand corner. The lower the button, the less discoverable it’ll be.

In languages written left to right, users start to read from left, that’s why it’s good to display the main call to action last on the right side. Users can take an action once all options are already presented. According to psychologist Herman Ebbinghaus the first and last elements in a sequence are the easiest to memorize. This tendency is called the serial position effect and it’s used in UX design.

A standard Wix Business Manager page
Most important actions “Save” and “Cancel” are positioned in the top right corner so they’re always visible.


All buttons must be recognizable actions. Use emphasis to achieve that. Note that not every button must be emphasized at the same level. A single page should have only one main action. Other actions should be secondary or tertiary.

Multiple buttons sorted by their importance


Each button can have a style based on its own intention. A set of styles creates a design language which customers use when working with an application. There can be a different style for general, navigation, social share or upload buttons. Each brand product can have its own set of button styles.

Multiple buttons in different shape and color


Buttons can appear in multiple sizes. Large buttons should appear in large and spacious layouts, tiny buttons should be used in small and crowded spaces.

Four different size buttons


A well organized hierarchy between the actions creates harmony on the page so it’s easy for the user to read and understand. For example, Wix Seatings Map Builder shows how button’s different properties make a clear hierarchy between actions — primary, secondary and least important.

  • Primary: Highest contrast, crucial for the main goal.
  • Secondary: Recognizable on the screen without any clicks, assisting the main goal.
  • Least Important: Hidden under the Icon Button and are not really connected to the main goal, e.g.: “Edit Ticket”.

Each action has a clear text label that helps users to understand the button from first glimpse. Icons in the buttons are plain and recognizable by industry standards.

A screenshot of Wix Seatings Map Builder application

This article is a collection of experiences from multiple designers from many teams. A big thanks to everyone who shared their case studies, insights, and feedback or simply designed great products that inspired this article.

Originally published on medium

post authorDomas Markevicius

Domas Markevicius,

Domas works at Wix.com for almost 7 years. He designed multiple Wix products in the past, and now leads a team of design system experts. His team provides UI assets and guidelines to the forty different product teams. His job is to understand cross-team-related design patterns well and share the best practices backed by case studies.

Ideas In Brief
  • Buttons are one of the main UI elements in interactive design and most businesses measure their success by button clicks.
  • The author covers the principles for a good button design at Wix:
    • Making a button clear
    • Making a button findable
    • Making a button identifiable
    • Maintaining clear, predictable and simple text
    • Using single icon buttons with caution
    • Minding hierarchy and emphasis

Related Articles

Visualising 10 types of bias in 10 visuals.

10 Types of Cognitive Bias To Watch Out For In UX Research & Design
  • The article covers how crucial it is to address cognitive biases for navigating daily life as well as UX research and design. Our judgment and thought processes become biased, which might distort reality in accordance with our preconceived notions.
  • The author illustrates 10 examples of real-life cognitive biases and their reflection in UX research.
Share:10 Types of Cognitive Bias To Watch Out For In UX Research & Design
5 min read

More autonomy and less dependency can improve our toxic relationship with digital technologies and benefit all of us, says Alexander Steinhart.

Designers And Developers Pay More Attention To Human Autonomy
  • The majority of tech companies concentrate on attracting active users and increasing consumption. Additionally, their economic incentives conflict with our own values and aspirations as users. 
  • According to the author, we should adhere to the rules of responsible, ethical, and humane design referred to as Design for Human Autonomy.
  • There are 3 conditions to design for human autonomy:
    • The user and their interactions with others should be prioritized over their use of the digital service;
    • In the end, consumers are encouraged to navigate mainly without the software itself;
    • The app’s values are transparent, and it respects the users’ values and objectives.
Share:Designers And Developers Pay More Attention To Human Autonomy
5 min read

What if we designed anything with relationships in mind?

The Rise of Relational Design
  • The author believes that putting relationships first should be a common practice in every part of human activity.
  • The author sees a relational design as something we can anticipate in the nearest future. It can be applied in many cases – from designing cities to building any type of organization or system.
  • Relational design isn’t new in any way – the fact they are old makes them this powerful. With relationships in mind, we can start designing a new future.
Share:The Rise of Relational Design
3 min read

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and