Buttons are a simple element of interactive design, used everyday by people browsing the web. As web design has changed over time and new trends appeared every now and then, the design of buttons evolved too.
The challenge of button design is quite simple: Buttons must be designed in a way that they are recognized as buttons and users can expect the action which is followed by the button.
In this article, I’ll give you an overview of the evolution of button design and how to create modern web buttons.
The evolution of button design
If we talk about the evolution of button design on websites, we need to take a moment to recognize the overall button evolution.
Buttons have been around for quite a while. Just think about the following use cases and products.
The evolution of web design & the role of buttons
Since the early days, operating systems used buttons as interactive elements. With the extensive usage of shadows and colors, web designers tried to establish a clear line between buttons and other content elements.
A button in itself is a pretty simple design. You just need a border and some shadows and some text et voilà: the button stands out against the background and the content. Users have now learned that these elements are clickable content.
(Buttons used on apple.com in 1999)
The role of skeuomorphism in button design
Skeuomorphism is the concept of helping users to understand the purpose of certain design elements immediately. Skeuomorphism is the design of software to look like the physical product that it’s replacing.
In web design, the concept of skeuomorphism transforms real life elements into UI elements on a website, for example.
Apple’s calculator app is a great example to visualize the transformation of real-life elements to UI ones.
When it comes to button design, skeuomorphism is a safe approach for web designers and developers. Onboarding- and educational costs can be minimized and new users may be attracted simply because of the way your website or app looks.
Modern button shapes – from shadows to flat design
Remember the early days of web design, where designers loved to play around with shadows? Basically, you could find them everywhere. Headlines, images, normal copy, even buttons. Shadows were used to display that certain design elements differ.
Even Apple.com made use of heavy shadows to create 3D effects in order to differentiate between interactive elements and non-interactive ones.
As years went by the web became a colorful place to be. And with the discovery of colors, button elements not only differed through shadows but also with colors.
Flat buttons
With the recent design trend of flat web design, shadows, and other 3D effects became less
popular among web designers and UI advocates.
Flat web design makes websites more lightweight and allows designers to open up their horizon by not emulating real-life elements and bringing them into web design.
Google’s material Design language is a great example of flat design.
Ghost buttons
Ghost buttons increase the functionality of a site by providing more content while ensuring the UX doesn’t get distracting. Only when the user hovers over the links or the images does the clickable link expand and show more relevant information.
Especially, aesthetic-heavy websites try to make a compelling case for the use of ghost buttons.
Ghost buttons can be transparent in normal state, and get colorized in hover state.
(example of bigdropinc.com)
Placebo button
Users love control. And the placebo button only exists because of that. If a button does nothing except giving you the feeling of control, it is a Placebo button, also known as an “idiot button”. In web design, you can fake interaction with those Placebo buttons giving your users the feeling of control.
How to create a button
When designing a new button, you must consider various things – from how to communicate the action, to contextual style, to branding guidelines.
Tutsplus collected these principles for successful button design – so better check them out.
Here’s how I’d get started creating a new button.
Step 1) Make the button look like a button.
No matter if you’re designing a sign-up button or simply want to draw attention to a certain section of your website. A button should look like a button.
- Use button shapes which make buttons look like buttons
- Make it easy for your users to interact with your button
- Use colors
So how does this look like? With a little help of CSS, we can simply make a basic button which actually looks like a button. Yay!
.button-link {
padding: 10px 15px;
background: #005E99;
color: #FFF;
}
And the button will look like this:
Step 2: The hover state
Finishing step 1 we got a link transformed into a button. However, we need to think about the styling in hover state. Typically, those buttons see a change in background color as the hover state.
As people might also navigate with their keyboard (and not via mouse) we need to share the same style with the :focus class.
.button-link:hover, .button-link:focus {
background: #009dff;
border: solid 1px #009dff;
}
And et voila, we have a button with a hoover state now.
Step 3: The active state
One of the last steps to a first button design is adding an effect for the active state of your button. This effect is displayed when your user clicks on the button. In todays button design, those effect expresses a press-down effect.
The active state can be styled with an “:active” class.
.button-link:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
background: #1D1F20;
border: solid 1px #1D1F20;
}
And it’s done. Our first draft is done.
Wrapping it up.
Buttons are interactive elements which are used to lead users to certain directions and make them take an action.
No matter if we’re thinking about those early button designs in the 90ies, or those flat- and ghost buttons nowadays, buttons play a crucial role in web design and how our website or application is used by our users.
Resolve issues faster with visual bug reporting.
Simplify and reduce issue & bug reporting efforts with screen recordings, screenshots, and annotations.
And if you’re ready to try out a visual bug tracking and feedback solution, Usersnap offers a free trial. Sign up today or book a demo with our feedback specialists.
