In the early days of the web, buttons were a rectangle and a phrase, or sometimes just an arrow. Now, we see a wide variety of button styles equipped with extensive hover effects, shapes, and actions. You may even have a personal preference for the button shape you most like.

Identify the Button Shape Right for Your Website

When designing website design comps, I prefer rectangular buttons with rounded corners because of the soft, friendly appearance they have! But we’re going to explain why picking your button style is much more than just picking what you like.

Three different button shapes for your website.
Website buttons can take on a variety of shapes. Each can give a different meaning or action.

Subtle associations come from the subconscious relationships we make with shapes. While we most commonly see color psychology, shape psychology is also valid and quite interesting. We associate squares with hardness and sharpness, circles with warmth and comfort, and triangles with movement and wit. To dig in a little further, you can think about logo design and even character and type design when touching on these shape attributes.Take a look at the big three automotive company logos. This gives you some immediate insight into their inner workings and brand positioning. General Motors (GM) appears very serious with its heavy blocks, even the typography reinforces the angularity with the rectangular underline and strong sans serif font. 

We’re taking a deeper look at the three automotive companies’ logos – additionally, each include some variation of blue.

Take a look at the big three automotive company logos. This gives you some immediate insight into their inner workings and brand positioning. General Motors (GM) appears very serious with its heavy blocks, even the typography reinforces the angularity with the rectangular underline and strong sans serif font.

Ford presents a softer feeling by using a fluid script and ovals as the base of its emblem making it feel more accessible for some. Chrysler’s original logo, created with 5 triangles, feels like it’s moving your eye through the negative spaces due to the diagonal lines. You can take a look at each of these yourself and assess the emotions the shapes bring about. When you equip yourself with the reasons things seem a certain way, you are able to make much more informed decisions to feel better for users in the long run. 

Express The Brand Stance

Depending on what you’re designing, the brand may already obviously call for a certain button style. Say you’re working with a bank, everything is very stringent and professional. You would want a button style and border-radius to reflect this. A sharp, 90-degree angle would be appropriate in this case. A sharp rectangle has a great deal of structure and substance to it, giving it a very professional look. 

However, say you’re working on a new app that’s trying to help people keep track of their time spent on work projects. This is a friendlier, client-facing type of software that users will interact with frequently if it works right. Something like this will often carry rounded corners, as they are much friendlier due to their softness. Even further down this vein of a welcoming brand stance might be a company that deals with childcare booking. This is meant to be incredibly welcoming and warm, so a good way to go about this is by incorporating a fully rounded button. The fully-rounded button is peak softness and is enticing to click. It is also a very warm, friendly-form that subtly encourages this business will do the same with your child.

Keep it Consistent

Depending on your choice, you should make sure the chosen type of border-radius, or how rounded the corners on your containers are, is seen throughout your design. Buttons are very important in defining the look and feel of your design. If you have hard, angular containers and images, then a rounded edge button will feel a little out of place. This can be used as an intentional anomaly in the design, in a set of round shapes the sharp will naturally pop out to viewers. 

Using a technique like this is a principle in Gestalt Theory called Similarity. The intentional breaking of consistent forms must be done well to feel intentional and not like a mistake. It is important that over an individual button aesthetic, the design meshes with itself and feels connected together by various elements in the design, such as border-radius on containers.

The Nitty-Gritty

Once you pick the shape and style of the button, then comes the time to pick the font, the arrow style, and any hover effects you may want to implement! Arrows should be more closely related to the brand itself. You can venture out and get creative by using objects with a triangular form to imply the arrow, like in one of our projects where we used rocket ships.

Club Scientific's mission on the homepage | Button shape.
Get creative by using your branding to incorporate within your button styles.

This basic shape psychology can be used to inform your arrow choices too. Think about continuing the roundness present in your edges and reflecting that onto the corners of your arrow. As far as the typography is concerned on your button, use something already within the site design that is very readable to ensure clarity.

It is important to take a look at what you are designing, identify your user base, and design it around the feeling you want to evoke for them. While the button may seem like a somewhat arbitrary decision to make, it is fundamental in establishing a consistent look and feel for your site or app’s design. The button is what people are most commonly interacting with when it comes to call-to-actions (CTAs) – we want to make sure it’s not an oversight. It’s easy to make a rectangle, slap some words and an arrow on it,  and call it a button, but your user base will appreciate the extra thought put into it.

Contact Us For a Consultation

Want to know if you have the right button shape and links on your website? Contact TM, or call (248) 582-9210, for a consultation. We can audit your website and present the findings and solutions to improve your presence online.

Leave a Reply

Your email address will not be published. Required fields are marked *

Read Related Posts