UI Design: Basic Types of Buttons in User Interfaces
Published: 2021-05-10 06:36:45

What Is a Button?
A button is an interactive element that enables to get the expected interactive feedback from the system following a particular command. Basically, a button is a control that allows a user to directly communicate with the digital product and send the necessary commands to achieve a particular goal. For example, it may be the task to send an email, buy a product, download some data or a piece of content, turn on the player and tons of other possible actions. One of the reasons why buttons are so popular and user-friendly is that they efficiently imitate interaction with the objects in the physical world.
Modern UI buttons are really diverse and can serve plenty of purposes. Typical and frequently used buttons which present an interactive zone, usually clearly marked out for visibility and having a particular geometric shape and often supported with the copy explaining what action will be fulfilled via this button. Designers have to apply considerable time and effort to create effective and noticeable buttons that are naturally integrated into the general stylistic concept but are contrast enough to stand out in the layout.

CTA Button
A call-to-action (CTA) button is an interactive element of a user interface that’s aimed at encouraging a user to take a certain action. This action presents a conversion for a particular page or screen (for example buy, contact, subscribe, etc.), in other words, it turns a passive user into active. So, technically it can be any type of button that is supported with a call to action text. What differs it from all the other buttons on the page or screen is its engaging nature: it has to catch attention and stimulate users to do the required action.

Text Button
Here the terminology is transparent: it’s a button presented with a piece of text. It means that the copy isn’t integrated into any shape, filled tab or anything like that. So, it doesn’t look like a button in our standard understanding of this phenomenon in the physical world. The copy is its only visual presenter. Still, it’s a live control that allows users to interact with an interface. You can also see these buttons marked with color or underlined. Also, used in the website heade, text buttons connect a user with the core content sections of the website – and in this case, they aren’t marked anyhow as all (or most) elements in the header zone are interactive by default. Text buttons are usually used to create secondary interactive zones without distracting from the main controls or CTA elements.

Hamburger button
It is the button hiding the menu. When you click or tap it, the menu expands. This kind of menu (and button as well) got such a name due to its form made of three horizontal lines that look like a typical bread-meat-bread hamburger. Today it is a widely used interactive element of web and mobile layouts; still, debates about its pros and cons are still hot.
Active internet surfers visiting diverse websites on a regular basis know by default that this button hides the various categories of website content so this trick does not need additional explanations and prompts. What’s good, hamburger menus free the space making the interface more minimalist and airy; from the point of functionality, it saves a lot of space for other important layout elements. Additional benefits can be mentioned for responsive and adaptive design hiding navigation elements and making the interface look harmonic on different devices.

Plus Button
Being clicked or tapped, plus button enables a user to add some new content to the system. Depending on the type of an app, it can be a new post, contact, location, note, item in the list – anything that is a basic action for the digital product. Sometimes, tapping this button, users are directly transferred to the modal window of creating content, in other cases, there is also a medium stage when they are given additional options to choose from and make adding content more focused.
Expendable Button
This button opens a variety of options after being clicked or tapped. It is one more way to set the proper flow of interactions without overloading the screen, which is particularly important for mobile interfaces limited in screen space.

Ghost Button
Ghost button is a transparent button that looks empty. That’s why it is also called “empty”, “hollow” or even “naked”. Its visual recognizability as a button is typically provided with a shape bordered by quite a thin line around the button copy. This kind of buttons helps to set the visual hierarchy in case there are several CTA elements: the core CTA is presented in a filled button while the secondary (still active) is given in a ghost button.