Web Buttons Design for last eight years

buttons history - Web Buttons Design for last eight years

Eight years of web button design history.

Buttons. With them, we finalize shopping on the internet, log in to our bank app, and submit forms filled with our most personal information. Web design is growing at an incredible pace, and styles seem to change from month to month. In just a few years, we have gone from text links to skeuomorphism to flat design. Navigation is one of the most important elements of web design, and the call to action button is its strongest tool.

In this article, I trace eight years of web button design history based on Dribbble.

The Dribbble Buttons Timeline

In 2009, Dribbble has created: a platform for designers from around the world who shared little pieces of their current projects. Using Dribbble, we can follow the story of button trends and design across the last eight years. I’ve gone through a few thousand Dribbble shots to create an interactive timeline of button styles:

1*TzI 2BDF6DIMWRRRhBQt0A - Web Buttons Design for last eight years


In this year, the internet celebrates its 40th birthday, and the first “shots” appear on Dribbble. The design of buttons is dominated by greyscale. Delicate gradients, rounded corners, and shadows appear in almost every button design. This aesthetic refers to native system buttons.

1*dZWUWTYJvinfRZPDm qQng - Web Buttons Design for last eight years
Wojciech DobryDan CederholmJosh BryantDribbbleSarah ParmenterMatthew Smith


The year in which Instagram is created. The form of buttons do not change drastically, but there are many more colors, more details (such as inner shadows), and much more decorative typography.

1*2qXTGTeeeLROEcFR4CU9QQ - Web Buttons Design for last eight years
Wojciech DobryMorgan Allan KnutsonTroy BerglandClaudiu CiobaLiam McKayJared Christensen


CSS3 has its premiere this year, and the number of internet users grows to a billion. Skeuomorphism still reigns, and many designers are developing this style in a very creative way. You will not find any rules for applying shadows or lighting here, but you can be sure that all these elements are present in each project.

1*ZjKQQWufQjA0SQX9YouSUQ - Web Buttons Design for last eight years
Wojciech DobrJulien RenvoyeClaudiu CiobaMeagan FisherJosh Hemsley, Jonathan Moreira


The decline and the final form of skeuomorphism, and the shy beginning of flat design. This year is by far the most developed form of skeuomorphism. Some designers have reached a master level in this style while others have started looking for something new.

1*Zjz2EINYFMeTfYyYJLZfDw - Web Buttons Design for last eight years
Wojciech DobryEduardo SantosMike | Creative MintsMaykel LoomansIan CollinsDawid Liberadzki


In this year, Apple definitely moves on from skeuomorphism, releasing iOS7. Undoubtedly, this year is the beginning of the trend that continues today — flat design. Almost every single designer on Dribbble — in one moment — abandons any attempt to give a third dimension to their app or web buttons and decides to go flat.

1*XYa6WmKqwxQmQUCoB0afPA - Web Buttons Design for last eight years

Wojciech Dobry, Cosmin CapitanuEddie LobanovskiyJonathan MoreiraRiki Tanone


Google releases Material Design. However, many designers do not follow this style completely. This is a pretty interesting year because everyone suddenly starts to use ghost button style or flat buttons. They appear in most shots on Dribbble. Two Pixel borders with vibrant colors — that’s 2014 in a nutshell.

1*aI5CVVroDHy7bGcxES 6EQ - Web Buttons Design for last eight years
Wojciech DobryEric HoffmanRamil Derogongun, Mason YarnellColin GarvenBill S Kenney


Just a few months after hearing the announcement of Material Design by Google, UI designers fall in love with this guideline. The flat surface of the button with a delicate shadow underneath signals the significant impact of Material Design on current trends. See how many people apply this style to their projects.

1*9lOB BGTBMA6dTRdK1iObg - Web Buttons Design for last eight years
Wojciech DobryVictor ErixonLeo LeungGeorge VasyaginHoang NguyenJoshua Krohn


Designers get bored, so they come up with new elements to mix with Material and Flat Design. Gradients appear on the surface of buttons, not to emphasize the third dimension but to emphasize the button material itself. The button gains color shadows and starts to glow.

1*oxroI5J1dwpS90ytc3jcgA - Web Buttons Design for last eight years
Wojciech DobryAnastasiia AndriichukGleb Kuznetsov✈Ghani PraditaKristoforBen Mingo


I am very curious as to how-how I will look at this year in another eight years. So far this year is, on the one hand, has been a year of minimalism and flat design. On the other hand, we are still looking for new forms. We are at a stage where we are no longer technologically limited; only limited only by the frames of trends and fashion.

1*w Oo1q 54XCA3vTevgAvKQ - Web Buttons Design for last eight years
Wojciech DobryBen ClineAnton Aheichanka, Vera Voishvilo, George VasyaginGhani Pradita

What’s next?

How long will button styles continue to evolve? I do not know. I know only that they will. The reasons for evolution may vary — technological change, growing designer awareness, boredom.

There is no denying that buttons are ripe for another change. Maybe this change will be their death? With gestures, intuitive interactions, AR, VR, and sound interfaces, will we still need the buttons that we’ve worked on for years?

This article was originally published at blog.framer.com.

face free5 - Web Buttons Design for last eight years
Dan M.

Open Studio

“Theodore Shepard run his support seamlessly. He uses Trello to manage tasks. He is based in the US. He is super responsive. I highly recommend his. I’m not a shill for them. I am not an affiliate. I can just say that I have been using this for several months now and could not be happier.”

Leave a Reply

Your email address will not be published. Required fields are marked *