Buttons are among the most popular interactive elements of a user interface. Furthermore, they are vital in creating solid interactions and a positive user experience. Today, continuing our series of UI/UX glossary posts, we've compiled definitions and examples of the most commonly used button types we see daily on websites and mobile applications.

What is a button?

A button is an interactive element that allows you to obtain the expected interactive feedback from the system after a specific command. Basically, a button is a control that allows the user to communicate directly with the digital product and send the necessary commands to achieve a specific goal. For example, it could be the task of sending an email, buying a product, downloading some data or part of a content, turning on the player, and various other possible actions. One of the reasons why buttons are so popular and easy to use is that they efficiently mimic interaction with objects in the physical world.

Modern user interface buttons are truly diverse and can serve many purposes. Typical, frequently used buttons that feature an interactive zone are usually clearly marked for visibility and have a specific geometric shape, often accompanied by copy explaining what action the button will perform. Designers need to invest considerable time and effort in creating effective and visible buttons that are naturally integrated into the overall stylistic concept, yet contrast enough to stand out in the layout.

Let's examine the types of buttons widely used in mobile and web interfaces.

CTA button

One call to action (CTA) button It is an interactive element of a user interface that aims to encourage a user to perform a specific action. This action presents a conversion For a specific page or screen (e.g., purchase, contact, subscription, etc.), it transforms a passive user into an active one. Therefore, technically, it can be any type of button supported by a call-to-action text. What differentiates it from all other buttons on the page or screen is its attractive nature: it needs to grab attention and encourage users to perform the necessary action.

Here is the homepage of a e-commerce site that sells books for children .In the featured slide, there is a main action defined as the page's objective: to get a user to subscribe to the mailing list sharing. Therefore, the button was designed as one of the most visible elements of the layout, so that the user can instantly see how to perform the action as soon as they are ready to do so.

Text button

Here the terminology is transparent: it's a button presented with a piece of text. This means the copy isn't integrated into any shape, filled tab, or anything like that. Therefore, 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 might also see these buttons marked with colors or underlines. Furthermore, they are used in... header of site , Text buttons connect a user to the main content sections of the site – and in this case, they are not marked up in any way, as all (or most) of the elements in the header zone are interactive by default. Text buttons are generally used to create secondary interactive zones without distracting from the main controls or CTA elements.

Here is an elegant website design for a fashion store .As you can see, the interactive part of the layout is based on text buttons. Only the main CTA element is presented as an easily decoded button. All others are simply copy in the header and offer tabs. This approach supports the overall style and minimalist from the web page.

dropdown button

When you click it, the dropdown button displays a dropdown list of mutually exclusive items. You can find this type in the settings button. When a user selects one of the options from the list, it is usually marked as active, for example, by color.

The interaction flow of HealthCare app This shows the buttons that open lists of details a doctor can add to a specific account: when the button is clicked, it opens a dropdown list of options. Once you choose one, the large button disappears, leaving the chosen option and the small button remaining, in case you want to check the list again.

Hamburger button

It's the button that hides the menu. When you click or tap it, the menu expands. This type of menu (and also the button) got its name due to its shape, composed of three horizontal lines that resemble a typical hamburger bun with meat and bread. Today, it is a interactive element Widely used in web and mobile layouts, debates about its pros and cons remain heated.

Active internet users who regularly visit various websites know by default that this button hides the site's various content categories, so this trick needs no further explanation or warning. Which is good, hamburger menus free up space, making the interface more minimalist and airy; from a functionality standpoint, it saves a lot of space for other important layout elements. Additional benefits can be mentioned for the responsive and adaptable design, hiding navigation elements and making the interface look harmonious on different devices.

Arguments against the hamburger menu are based on the fact that this design element can be confusing for people who don't use websites regularly and may be misled by the highly abstract design. It can negatively impact navigation and lead to a poor user experience. Therefore, the decision to implement the hamburger button should be made after user research and defining the skills and needs of the target audience.

Although burger menus still belong to controversial issues of modern app and web design, they are frequently used.

Here is an example of one. site Using the functionality of a hamburger menu. Allows you to hide the extensive menu of options to focus the user's attention on... stunning visuals and essential information.

Add button

By clicking or tapping the plus button, the user can add new content to the system. Depending on the type of application , This could be a new post, contact, location, note, list item – anything that's a basic action for the digital product. Sometimes, tapping this button takes users directly to the content creation modal window; in other cases, there's also an intermediate stage where additional options are offered for you to choose from, making content addition more focused.

Disposable button

This button opens up a variety of options after being clicked or tapped. It's another way to set the proper flow of interactions without cluttering the screen, which is particularly important for mobile interfaces with limited screen space.

Here is the application. Travel Planner The central interactive element of the tab bar is an add button that allows the user to add a new trip or a new item to the specific trip. To simplify the experience, the button expands into a set of buttons, marking defined types of content, so that the user can make the choice at the beginning and access the necessary screen.

Share button

With the high popularity of social media, chatting, and emailing, these buttons simplify the process of connecting app or website content to a user's social profiles. This type of button allows sharing content or achievements directly to social media accounts. To make the connection clear, it's presented with icons that feature the branding of specific social networks and are easily recognizable. Now, often, if sharing isn't the primary action expected from the user on the page, they aren't marked as buttons in any way (no additional shapes, color markings, underlining, etc.) – you just see the icons, but they are interactive. This approach supports minimalism and the effective use of negative space. It also allows users to focus on the main functionality while always seeing cues for quick access to their social profiles.

Here is the corporate website elegant and minimalist of a construction company .In the bottom left corner of the homepage, you can see the icons for the corporate social accounts. They are easily noticeable, but well balanced so as not to distract from the main navigation and the CTA button.

Ghost button

A ghost button is a transparent button that appears empty. That's why it's also called a "blank," "empty," or even "naked" button. Its visual recognition as a button is usually provided by a shape delimited by a fairly thin line around the button copy. This type of button helps define the visual hierarchy in the case of multiple CTA elements: the main CTA is presented in a filled button while the secondary (still active) one is provided in a ghost button.

Here is the registration screen for a restaurant app .It has three different types of buttons: the main CTA is presented with a pre-filled button offering the most popular and easiest way to quickly sign up; the ghost button provides access to the less popular option; the text button is integrated into the next line as an answer to a question and is color-coded. This approach helps create a visual hierarchy Solid buttons on the screen.

Floating action button (FAB)

Node Materials design , The floating action button (FAB for short) is the button that presents the main action on the application screen. It's typically a round icon button raised above other page content. This button usually provides instant access to essential or popular actions that users perform within the application. Depending on the mobile application's design and information architecture, the FAB can:

• Perform a typical main action (open the new email screen, open the photo or video content addition screen, search for the necessary content in the gallery, etc.)
• show additional actions
• transform into other elements of the user interface.

The FAB's position on the screen is generally determined by the high visibility factor and may vary according to the overall design concept of the application screens. The general rule is to use only one FAB per screen, and no more, to avoid loss of concentration.

Here is a flow of interactions for the traveler's diary that They apply the bottom application bar, the FAB overlay, and the list of woven images.

Effective design factors for buttons

Size

Size is one of the main ways to inform users about the importance of a layout element and create the component hierarchy. An attractive and efficient call-to-action button needs to be large enough to be found quickly, but not so large that it spoils the layout structure. Market leaders usually provide recommendations on the appropriate button size in their guidelines. For example, Apple says that CTAs in the mobile user interface should be at least 44 by 44 pixels, while Microsoft recommends 34 by 26 pixels. If you are designing for mobile devices, the requirements for different button types can be quite stringent; therefore, study the guidelines carefully to minimize the risk of app rejection due to poor user interface design.

Color

To make some buttons easily noticeable and others secondary, it is vital choose a suitable color .The fact is that human mood and behavior are closely related to the visual environment, and color is one of the most powerful tools in this regard. It's important to keep this in mind when choosing colors for the CTA: the buttons and background colors need to contrast well to make the button stand out quickly from other user interface components.

Form

Regarding CTA buttons, they generally resemble horizontal rectangles. The reason is that you want to make it clear that this button is clickable and interactive, and people are used to perceiving this shape as a button. Additionally, it's recommended to design CTAs with rounded corners because they are designed to point inward, drawing attention to the copy. Of course, this decision is made if the shape harmoniously matches the overall stylistic concept chosen for a web page or mobile app screen.

Channel

Button placement is crucial for building a solid visual hierarchy and a navigation Clear. If they are located in areas where the user's eyes cannot capture them, other visual aspects, such as color and size, may not function efficiently. Designers need to learn the areas more digitizable and place the main functionality buttons in the user's path.

Copy of

Powerful button microcopy is usually short but consistent, designed to quickly grab users' attention. It's often done in all caps to make the copy even more eye-catching within the layout. However, this isn't strictly necessary; the decision is made based on the overall design concept., typography and the humor of the text message.

Here is the landing page design For a kindergarten. Let's review all the buttons used on the page:

• o main CTA button that The invitation for visitors to participate is instantly visible: the designer used a rounded, rectangular button in a color that contrasts with the background, but establishes a visual connection with the animated image of the hero, the most important visual element on the page. The CTA text is provided in a simple, legible font, with all capital letters.
• the header has 4 text buttons that connect users to the important content sections of the site.
• The left side of the header shows the secondary CTA button which is quickly verified and allows already registered users to log into their accounts.
• you share buttons They are placed in round shapes, but do not receive much color contrast, so that they are easily found, but not to distract users from the main CTA.

Obviously, there are more types of buttons to discuss and examples of user interface design to check out. Therefore, we will continue in our next posts, so don't miss the updates.