{"id":5485,"date":"2016-08-09T16:32:00","date_gmt":"2016-08-09T14:32:00","guid":{"rendered":"https:\/\/usersnap.com\/?p=5485"},"modified":"2025-06-30T19:57:13","modified_gmt":"2025-06-30T17:57:13","slug":"buttons-web-design","status":"publish","type":"post","link":"https:\/\/usersnap.com\/blog\/buttons-web-design\/","title":{"rendered":"The evolution of buttons in web design"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

In this article, I\u2019ll give you an overview of the evolution of button design and how to create modern web buttons.
<\/p>\n\n\n\n\n\n\n

Try Usersnap for Design Feedback<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n

The evolution of button design<\/h2>\n\n\n\n

If we talk about the evolution of button design on websites, we need to take a moment to recognize the overall button evolution.<\/p>\n\n\n\n

Buttons have been around for quite a while. Just think about the following use cases and products.<\/p>\n\n\n

\n
\"web<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The evolution of web design & the role of buttons<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

A button in itself is a pretty simple design. You just need a border and some shadows and some text et voil\u00e0: the button stands out against the background and the content. Users have now learned that these elements are clickable content.<\/p>\n\n\n

\n
\"apple<\/a><\/figure>\n<\/div>\n\n\n


(Buttons used on apple.com in 1999)<\/em><\/p>\n\n\n\n

The role of skeuomorphism in button design<\/h2>\n\n\n\n

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\u2019s replacing.<\/p>\n\n\n\n

In web design, the concept of skeuomorphism transforms real life elements into UI elements on a website, for example.<\/p>\n\n\n

\n
\"skeuomorphic<\/a><\/figure>\n<\/div>\n\n\n

Apple\u2019s calculator app is a great example to visualize the transformation of real-life elements to UI ones.
<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Modern button shapes – from shadows to flat design<\/h2>\n\n\n
\n
\"apple<\/a><\/figure>\n<\/div>\n\n\n

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.
<\/p>\n\n\n\n

Even Apple.com made use of heavy shadows to create 3D effects in order to differentiate between interactive elements and non-interactive ones.<\/p>\n\n\n\n

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.<\/p>\n\n\n

\n
\"click<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Flat buttons<\/i><\/strong><\/p>\n\n\n

\n
\"flat<\/a><\/figure>\n<\/div>\n\n\n

With the recent design trend<\/a> of flat web design, shadows, and other 3D effects became less
popular among web designers and UI advocates.
<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Google\u2019s material Design language is a great example of flat design.<\/p>\n\n\n\n

Ghost buttons<\/i><\/strong><\/p>\n\n\n\n

Ghost buttons increase the functionality of a site by providing more content while ensuring the UX doesn\u2019t get distracting. Only when the user hovers over the links or the images does the clickable link expand and show more relevant information.<\/p>\n\n\n\n

Especially, aesthetic-heavy websites try to make a compelling case for the use of ghost buttons.<\/p>\n\n\n\n

Ghost buttons can be transparent in normal state, and get colorized in hover state.