Why Use a Mega Menu on Your Elementor Website
May 31, 2023
Menu
This article will review some of the different button types and the context in which they are used. Previously, also read our article on the principles of using buttons.
A solid button is a button with a solid fill. In general, designers will use contrasting colors for these solid buttons in their designs so that these solid buttons will catch the user’s attention. That makes this button a good choice for a major call-to-action.
This button is perfect for prompting the user to complete a specific action, such as a ‘register’ or ‘buy’ action.
Convey button status. The user should understand the current state of the button just by looking at it. For example, the disabled state must have a different visual style than the active state.
Use the right button shape. Regarding the shape, there are two popular options – square and round corners. Buttons with rounded corners do look better to the human eye (we naturally tend to avoid objects with sharp edges).
But in the end, your button style should be chosen according to the style of your application. This means that if all your UI elements have a square shape, the button shouldn’t be an exception.
Provide visual feedback. It’s important to provide visual feedback on interactions. Smooth hover (for desktop) and click animations act as an acknowledgment to the user.
Use shadows to create a 3D effect. The shadow creates an elevation effect — the button will look like a three-dimensional object. Shadows can also amplify visual feedback — it’s possible to change the Z depth to mimic the feel of a button’s movement when tapped. But similar to the shape of a button, the use of shadows should be dictated by your visual design. If you use a drop shadow, make sure you carry that style to all your button types.
A ghost button, also known as a hollow button, is a button without a fill. Only the outline of the button is visible.
Ghost buttons are great for secondary call-to-action buttons. The primary call-to-action button will guide the user to the action we want them to take, while the secondary button provides a reasonable alternative.
Ghost buttons can also be a good choice for user interfaces where we don’t want to annoy the user. Because ghost buttons naturally have less visual weight, they attract less attention than solid buttons, making the UI less busy.
Last but not least, ghost buttons are visually versatile buttons, meaning they can work well on a wide variety of backgrounds. And that makes ghost buttons great for both dark and light themes.
As the name suggests, icon-only buttons are buttons that don’t have labels; it is only represented by an icon.
Since icon-only buttons don’t take up much space, they can be a good choice for menus and system bars. Icon-only buttons work well when you need to display multiple actions but don’t want to, for some reason, have them stacked on top of one another.
Make sure that the meaning of the icon is clear to the user. The meaning of the icon should be clear to the user. Users who don’t understand the meaning of an icon tend to avoid interacting with it. That’s why many designers say that “the best icons are text labels.”
Show tool description. If you’re designing a desktop app, consider adding a tooltip for icon buttons only. The user should be able to hover over the element and see its function.
A floating action button (FAB) is a type of button popularized by Google Material Design. FAB is an icon-only button designed with a subtle shadow and usually located in the lower right corner of the screen.
Because the FAB is a relatively compact button, it usually serves as the primary action for a mobile app. FAB is usually used for a single action.
Make sure that the meaning of the icon is very clear to all user groups. Since the FAB usually represents the main call to action, it’s even more important to use a clear icon. All user groups must understand the meaning of the icon. My usability testing shows that when users don’t understand the meaning of the FAB icon, they don’t interact with it, which can be a critical issue for your app.
FAB for one action only. Google says that when pressed, the FAB may contain more related actions. But most of the time, it’s better to avoid doing that as it will make the UI look more complex.
FAB doesn’t have to be a perfect circle. It is possible to use a more visually appealing shape for the FAB, such as an oval.
It doesn’t look like a button but still has direct controls that allow the user to interact with an interface that usually has a low level of emphasis, and is therefore outside of blocks of text.
Usually, we find the text button in the header or in the content that links to other links.
The toggle button provides options regarding the group and displays the selected action and settings. If you select one option, you deselect the other. This status change indicates whether the option is active or inactive. The toggle button is usually used less often than the other buttons.
Consider using it in surveys, site games, searches, and anywhere else. Users can select one or more options provided by this button!
Try using an icon or label for the options shown. As for their appearance, they can be plain and elegant or very cute! A switch contains an icon or label, so you can choose how to present the options it represents.
Those are some common styles of buttons in designs that you can choose from. Consider its use so that it is appropriate and provides clarity of action to the user.
Source: uxplanet.org, codetheorem.co, kalamuna.com
