18/06/2022
Which button style should I use in my website design?
Buttons are one of the most important UI elements as they make it possible for users to interact with a system and take action by making selections. Great button design makes it easy for users to take the action that designers want them to take which increases conversions.
The overall look and feel of a button should reflect the visual identity of the UI. Therefore we need to create a subconscious balance with the shapes that will allow the page to flow seamlessly. For example, if throughout the design there are many sharp edges on shapes, photography containers or even within the typography, ideally the button should follow a non-rounded aesthetic. Adversely if the typography consists of rounded edges, there are curved shapes and the design is soft a pill shape button could be a preference. Here are a series of common button stylings used within web design.
*All graphics we designed by Mango.
01. Sharp Buttons
Sharp-edged button styling is effectively just a rectangle with text inside. This is a visual style that should be considered relative to the overall look and feel of the website. If used without consideration of content within the composition of the design this styling could clash with the other elements on the page. A sharp geometric type such as Futura could complement this button styling quite well along with rectangle images. This style could be perceived in many different ways depending on the context, either harsh and brutal or sharp and high-end.
02. Semi-Soft Buttons
Within CSS (cascading style sheets) the code that styles a website, an attribute can be applied to any element to round the corners, this is known as; border-radius. This attribute varies by the number of pixels meaning the higher the value of the border radius the rounder the edges will be. A semi-soft button is a middle ground between sharp-edged and pill-shaped buttons. From a practical perspective, this shape allows room for text without a large amount of padding on the x-axis. When I use this shape I tend to round the edges of all images and blocks to the same pixel value.
03. Pill Buttons
A pill or a rounded button is where the border radius is at the maximum value. This is possibly the most common button in web design as it is the most identifiable as an element which a user can take action with.
04. Hollow Buttons
A hollow button is also known as a ghost button. This is where the button has no fill and instead an outline with the text the same colour as the outline. These are predominately used as a secondary call to actions. In other words, these are genuinely used within the same design as the filled buttons but for less important actions UX designers would like people to take.
05. Floating Action Buttons
Also known as FAB - these are a clever design pattern, made popular by Google’s Material Design. While they may look like an icon button, they are actually used for the primary action on screen.
06. Text Link
Text links are a very simple button type. There are many different ways to show that something is a link. This can be achieved through colour, underline or the position of the link, or even just the text itself (eg. “Read More”).
07. Icon with a label button
Icon buttons have grown in popularity, but some buttons still need a label to ensure that the button communicates a strong message visually. An image tells a thousand words so to highlight an action with an image is a powerful way to enhance a users journey.
08. Icon button
Icon buttons have no label and are only an icon, because they don’t have a label they save a lot of space in an interface. It is important that then chosen iconography intuitively communicates the purpose of the button.
09. Icon with a text Link
Some text links may have an icon with them. These do not usually sit within a body of text.
10. Abstract/Irregular Buttons
Not all buttons need to necessarily look like any of the aforementioned. In fact, in many of my web design projects I have used buttons stylings that divert from tradition. If there is a good conceptual reason why a new shape can be introduced into a website - Then do it. We should not be limited to any constructs, after all the internet is new terrain and we are the dreamers of the dreams.
