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.
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.
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.
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.
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.
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.
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”).
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.
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.
Some text links may have an icon with them. These do not usually sit within a body of text.
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.
Buttons are the portal to the next stage of a user’s journey, this is why as designers we need to give consideration to how we can encourage users to engage with our designs. The choice of a button does not stop with just the styling, next we need to decide what happens during, after and before the user interacts with these key elements. The forms, shapes, sizes and composition of a button can influence the page around it.