Basic Types of Buttons in User Interfaces

What Is a Button?

Buttons are an ordinary, every-day element of interaction design. Despite this, because buttons are a vital element in creating a smooth conversational flow in web and apps, it’s worth paying attention to these basic best practices for buttons. Also we’ll go over button types and states — important information you need to know to create an effective buttons that improves the user experience.

Expandable button

Basic Types of Buttons in User Interfaces

An button menu that can expand from any angle to any angle as you like.
 It support two type of button, text button and icon button.You can define the button style as you like, such as button size, button background color, text size, button shadow and so on.

Ghost buttons

Basic Types of Buttons in User Interfaces

Outlined buttons (often called “ghost” buttons) are a step up in complexity and emphasis from a text button in button design. They typically indicate actions that are important but not the primary action on a page. Outlined buttons should be exactly that: an outline with no fill surrounding text that indicates an action.

Share button

Basic Types of Buttons in User Interfaces

The Share button lets people add a personalized message to links before sharing on their timeline, in groups, or to their friends via a Facebook Message. If your app is native to iOS or Android, we recommend that you use the native Share Dialog on iOS and Share Dialog on Android instead.

CTA Button

Basic Types of Buttons in User Interfaces

Buttons you use in your website and on your landing pages to guide users towards your goal conversion. It’s the part of the landing page that the user needs to click in order to take the action you want them to take.

Text button

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 button in our standard understanding of this phenomenon in a physical world. The copy is its only visual presenter. Still, it’s a live control that allows users to interact with an interface.

Primary action

Basic Types of Buttons in User Interfaces

While a CTA button and a primary button can look the same, I like to separate them out. While CTA buttons are what the interface would want you to do, primary buttons should be a strong visual indicator to help the user to complete their journey. Primary buttons should be used in situations where the user may want to go ‘next’, ‘complete’, ‘start’, etc.

Leave a Reply