Common UI Button Styles

Sharp-corner buttons — those with a border radius of zero — give your designs a serious and sophisticated look. They look more solid and reliable than buttons with rounded corners.

According to the psychological Bouba/Kiki effect, over 95% of people associate edgy, jagged objects with words like "Kiki" that don't require a large opening of your lips. In contrast, words that people pronounce with widely open, rounded lips, like "Bouba," are associated with curve-outlined shapes.^[1] More importantly, sharp shapes feel more rigid and severe, while soft-edged shapes feel more friendly and easy-going.

Sharp-corner buttons may be a good solution for an insurance company website but could appear too harsh for a site selling blankets, clothing, and gifts for babies.

Rounded buttons use a border radius greater than zero, giving them a smoother shape and a less formal look. Different radii convey different personalities, with rounder shapes being more playful. Additionally, round shapes feel safer and are more likable.

During a study conducted by neuroscientists from the Zanvyl Krieger Mind/Brain Institute at Johns Hopkins University, visitors to the Walters Art Museum in Baltimore were presented with a series of abstract images. After that, they were asked to vote for the most preferred and least preferred shape. The majority of visitors chose shapes with gentle curves over those with sharp points.^[2]

Rounded buttons will help you introduce the friendly personality of your brand and ensure safety and trust.

Pill buttons are like the jovial cousins in the button family—rounded to the max, they mimic the shape of a physical pill. This shape exudes a playful, friendly vibe, making it a go-to choice for more relaxed, informal interfaces.

But crafting a great pill button involves more than just rounding the corners:

• Set your border radius to half the button's height to achieve that signature pill look.
• Don't overlook the label; it needs space to breathe.
• Increase the button's horizontal padding to ensure that your text label sits comfortably within the button, enhancing readability and touchability.

Dropdown buttons or menu buttons, typically marked by a trailing arrow icon, are a unique button type designed to reveal a list of options or actions upon activation. They're especially useful for decluttering your interface and streamlining the user experience. Rather than presenting users with multiple individual buttons, a dropdown button neatly tucks away options, making them accessible in a single click.

This can be a real advantage when screen real estate is at a premium or when you want to offer secondary actions without overwhelming users. However, it's crucial to ensure the dropdown only contains related actions and doesn't serve as a catch-all bucket. The aim is to make users' decisions easier, not more complicated.

Floating action buttons (or FABs) hover over the content. They help users perform an action in one click without leaving the main app screen.

To make FABs as useful as possible, connect them to your app's most popular and needed functionality, such as adding a post or image, or composing an email. That said, they should never be used for destructive actions such as deleting, signing out, etc.

Brand buttons are custom-designed buttons that incorporate a company's logo, color scheme, or other distinctive elements. These are usually seen in digital environments, like websites or apps, where you might need to link to or integrate with other branded services. Think of the "Sign in with Google" or "Download on the App Store" buttons.

To incorporate brand buttons in your design:

• Always consult the brand's guidelines: This ensures you're using the correct color, logo, and other assets.
• Place them thoughtfully: Usually, brand buttons go where the related action will take place, such as in a login or checkout section.

It's tempting to tweak these buttons to better match your design, but resist that urge. Deviating from the established look can confuse users and may even violate usage guidelines set by the brand. The primary role of a brand button is to establish trust and prompt action, so keeping their original design intact is crucial for user engagement.

Custom-shaped buttons can add a unique touch to your design while emphasizing function. Take an arrow-shaped "Next" button, for instance—it intuitively guides users forward. However, tread carefully.

The unconventional shape should amplify its purpose, not obscure it. Utilize visual cues like color contrast, subtle shadows, or size adjustments to ensure users instantly recognize it as an actionable element. Balance creativity with usability to make navigation a breeze for users, reducing any guesswork or friction.

A well-balanced button is more than just a pretty element; it helps users navigate with ease. To achieve this, always center your button content both vertically and horizontally. When using icons, avoid baseline alignment with the text label; it can throw off the symmetry. Instead, place icons inside their own containers for a more polished look. This approach ensures your buttons are not only visually appealing but also legible and user-friendly, making the user experience smoother overall.

When you're designing buttons, it's crucial to maintain a tight relationship between the label and the icon. The inside margin plays a big role in this. To ensure your button looks balanced and remains legible, keep the distance between the label and icon no larger than the button's horizontal padding. Straying beyond this boundary can make the button look disjointed and reduce readability.