From 3D to 2D
Ever since the revolutionary shift in focus from the product to user experience, buttons have gone from being rounded and shadowy like this…
To something like this…
The former is flatter, uses no color gradients or shadows. This is minimalist, simple and clean design at its best.
Back then, we had to create distinctive-looking buttons by making them bigger and using color gradients and shadows so that the user could distinguish the buttons on the screen from one another and easily identify their functions. This can be more difficult to do when you’re using buttons that completely lack that three-dimensional look.
With that said, here are some of the common types of buttons of the “Flat Design Era” and how to effectively implement them.
1. The Text “Button”
This isn’t exactly a “button” in our own standard understanding of an actual one. In this case, a simple line of text itself can function as a button. This “button” is a great choice for when you don’t want to distract from the main CTA elements on the page and therefore, making it serve a more secondary function.
Here’s how Dropbox uses text buttons for the options on the menu bar.
2. The Ghost Button
While we typically use conventional buttons to attract the user’s attention, these buttons look “hollow” and don’t typically stand out on a web page. But that’s what makes this button so useful; it controls the visual hierarchy on a given page, especially when you have multiple CTAs on one page and have to add an extra element that doesn’t distract from the other CTAs. Aside from setting visual hierarchy, ghost buttons can also give your site a more professional and sleeker look.
Below is an example of a ghost button in action. Notice the almost indistinct nature of the “Download” button?
3. The Hamburger Button
The effectivity of this three-line horizontal symbol resembling your typical burger is considered questionable amongst many designers. Is it too hidden? Does it interfere with UX? It’s debatable. Nevertheless, many websites on the internet still prefer its simplicity over the standard menu bar. If you’re wary about the possibility of actually driving users away because they can’t find the site menu, a simple solution would be to add the word “menu” next to the hamburger button.
This Swedish website is a great illustration of how the addition of this particular button can make your website seem airier and more spacious.
4. The Share Button
The share button symbol we all know in love is the one represented by three connected circles forming a “less than” symbol. This symbol is gradually being replaced by displaying the brand icons of social networking services instead. The reason for this switch in design preference could be that the brand icons are more easily recognizable to the user if they needed quick access to their social media accounts.
The share buttons on the blog “Highly Sensitive Refuge” are all neatly lined up in the top right corner of the menu bar and in full display.
5. The Actual CTA Button
This button, unlike the ones previously mentioned, should be the star of your web page. It’s crucial to use the right colors, font size and placement in order to turn a passive user into an active one. The reason why this button gets its own bullet point is its functionality: engaging, attention-grabbing, and stimulates users to perform a specific action.
It’s also worth mentioning that any button can be a CTA button, even a ghost button, if you do it right, that is.
Here’s what may look like a ghost button at first glance but the button’s placement in the middle makes it the center of attention, therefore taking on the role of a CTA button.
