Buttons. With them, we finalize shopping on the internet, we log in to our bank app, and we 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 will trace eight years of web button design history based on Dribbble.

The Dribbble Buttons Timeline

In 2009, Dribbble was 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:

Click the button above to browse The Dribbble Timeline

2009

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.

2009 buttons design

Wojciech Dobry,  Dan Cederholm, Josh Bryant, Dribbble, Sarah Parmenter, Matthew Smith

2010

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.

2010 buttons design

Wojciech Dobry, Morgan Allan Knutson, Troy Bergland, Claudiu Cioba, Liam McKay, Jared Christensen

2011

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 cannot find any rules for applying shadows or lighting here, but you can be sure that all these elements are present in each project.

2011 image collage

Wojciech Dobry, Julien Renvoye, Claudiu Cioba, Meagan Fisher, Josh Hemsley,Jonathan Moreira

2012

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, where some designers have reached the master level in this style while others have started looking for something new.

2012 buttons design

Wojciech Dobry, Eduardo Santos, Mike | Creative Mints, Maykel Loomans, Ian Collins,Dawid Liberadzki

2013

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.

2013 buttons design

Wojciech Dobry, Cosmin Capitanu, Eddie Lobanovskiy, Jonathan Moreira, Riki Tanone

2014

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.

2014 buttons design

Wojciech Dobry, Eric Hoffman, Ramil Derogongun,Mason Yarnell, Colin Garven, Bill S Kenney

2015

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.

2015 buttons design

Wojciech Dobry, Victor Erixon, Leo Leung, George Vasyagin, Hoang Nguyen, Joshua Krohn

2016

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.

2016 buttons design

Wojciech Dobry, Anastasiia Andriichuk, Gleb Kuznetsov✈, Ghani Pradita, Kristofor, Ben Mingo

2017

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

2017 buttons design

Ben Cline, Anton Aheichanka, Vera Voishvilo , George Vasyagin, Ghani 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 waiting 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?

About the author

Wojciech Dobry, Poland
member since November 1, 2016
Wojciech is a product designer with 6 years of professional experience in the design field. He's educated as an architect-engineer. Wojciech is responsible and has worked on web product design through information architecture to the user interface all the while keeping mindful of business goals. [click to continue...]
Hiring? Meet the Top 10 Freelance UI Designers for Hire in November 2017

Comments

brianm101
Interesting article - pity it can't go back further for some real horrors! However as users we all have a lot not to thank UI designers for! Summed up in the section - ' 2016 Designers get bored' User interfaces are not works of art, they are meant to be functional tools to allow users to easily accomplish the required job. Worse - Recent research indicates that the unbelievable stupid flat design can actually cost sites money in that users can't see were the buttons are - surprise surprise! The engineers in our development department have a theory that the more money that is ploughed into the UI design the worse the product is to use - only a theory of course, but I know a lot of end users who would agree! UI designers really need to get with the usability rather than looks and that most people are not under 21 and don't have 20:20 vision, so please don't use silly light coloured fonts on white backgrounds - worse than flashing yellow text on blue background in 1990's web sites (guilty!).
raghav_kukreti
What I believe is designers will move from flat to a philosophy called Typogryphical Design where elements such as text will be the main focus.
Alec Kinnear
Very interesting to see the actual timeline and dates. I was an early proponent of minimalist design (back in 2010/2011). Frankly as much as I like it, minimalism is getting tired under the constant onslaught of mediocre executions and ubiquity. I'd say the look of Snow Leopard (measured skeuomorphism, discreet 3D) is more useful for efficient communication.
Wojciech Dobry
Thank you for this comment! It's a nice addition to this article. I'm glad that you like it.
Wojciech Dobry
Yes, I got quite similar opinion – content will reign soon. 🤴
Wojciech Dobry
Thank you Alec! It really depends who is your target group. For example, new generations can easily navigate through the whole apps just by using gestures – without any visible / obvious UI elements.
Nodws
lol the internet started on 2009 or what? oh that 2017 reflex blue is becoming the comic sans of colors
Nodws
but minimalism was prominent in 2003-2004 (google, apple, adobe, microsoft, oracle etc) compare their 2003 sites with late 2004
Nodws
2006 flash glossy buttons! with hover sound xD http://images.all-free-download.com/images/graphiclarge/elements_of_glass_web_buttons_vector_521728.jpg
Wojciech Dobry
@nodwsp:disqus Thank you for your comment! 2009 – Dribbble was created. Some people love it, others hate it. For me, it's a great consistent resource to track trends. That's why I've chosen Dribbble. I am fully aware that the internet did not start in 2009, but these 8 years on Dribbble show how fast trends are changing and that's one of the main points of my article. If you are really interested in the button design history I would start from Xerox.
blackHoleOblivion
Funny, upon googling "Typogryphical Design", this comment thread ranks #2 (as of now ... for me while logged into Google ... because they're creepy AF like that).
oliversl
Just rollback to 2009 and we all be alright
Alex Galkin
There is only so much u can do: flat / not flat. Texture / no texture. Color / B&W.
Wesley Egberto
Great article!! Would be nice to see one about input text too ;) Thank you for this travel =)
Peter F.
I'm curious to hear more about your opinion!
Wojciech Dobry
I'm currently writing an article about buttons future. Stay tuned, it will be published soon!
Wojciech Dobry
I'm glad that you like it! Thank you.
O_U
to be fair, going back almost 10 years worth of design trends is a decent metric worthy of analysis
Nico Prat
That's because "Typogryphical Design" doesn't exist, but "Typographical Design' does :)
Donny Wells
Designers never wanted to mimic real buttons. You can blame all the clients and users that say "can it feel and look more like a button?" The majority of people aren't ready for button-less UI.
comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great design posts.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Wojciech Dobry
Designer
Wojciech is a product designer with 6 years of professional experience in the design field. He's educated as an architect-engineer. Wojciech is responsible and has worked on web product design through information architecture to the user interface all the while keeping mindful of business goals.