Dribbble Timeline of Button Design

The field of digital design and user interface development has advanced astonishingly in the last decade. This progress is reflected in the evolution of button styles, which is clearly illustrated in the Dribbble Button Timeline.

The development of web design has been progressing rapidly in recent years, with trends shifting constantly. Navigating a website is a crucial part of the design process, and the call-to-action button is one of the most effective tools available. Buttons are used to facilitate a wide variety of online activities, such as making purchases, connecting to banking applications, and providing sensitive information when completing forms. It is clear that the implementation of well-designed buttons can have a significant impact on the usability and success of any website.

Based on Dribbble, I will trace eight years of online button design history in this essay.

Timeline of Dribbble Buttons

In 2009, Dribbble was established as a platform for designers from every corner of the world to showcase snippets of their current projects. Through the utilisation of Dribbble, a comprehensive overview of button trends and designs in the past eight years can be established. To explore this concept further, thousands of images from Dribbble were studied to create an interactive timeline of button styles.

2009

This year marks the 40th anniversary of the internet, and the first “shots” of button designs appearing on Dribbble. These designs are mainly dominated by the use of greyscale. Almost every button design has been seen to feature gentle gradients, rounded edges, and shadows, which is believed to be inspired by native system buttons.

2010

In 2010, Instagram was launched, and the design of its buttons has remained relatively consistent over the years; however, there have been numerous updates that have included additional colours, features (e.g. inner shadows), and decorative text.

2011

This year marked the arrival of CSS3, with the total number of internet users reaching an unprecedented one billion. Skeuomorphism, which is the imitation of design elements from real-world objects, remains a popular trend amongst designers who are continuously exploring new possibilities and applications. Despite the lack of guidelines when it comes to employing shadows or lighting effects, these components are still present in the project and can be relied upon for the desired result.

2012

This year has marked the decline of skeuomorphism, with some designers reaching a peak in their mastery of the technique, while others have been seeking out a more modern, novel approach. The advent of flat design, which has been timidly emerging, is evidence of this shift in design trends.

2013

With the release of iOS7 in 2013, Apple demonstrated their commitment to the newly popularised concept of ‘flat design’, which entails the deliberate absence of any skeuomorphic elements. This year marked the beginning of a trend which continues to be embraced by designers today, with many designers on Dribbble choosing to forgo the use of three-dimensional elements in favour of a two-dimensional, ‘flat’ aesthetic.

2014

Google recently unveiled its new Material Design, however, not all designers decided to use it in its entirety. This year has been an exciting one, as there has been an emergence of the ‘ghost button’ style or flat buttons being used widely, often found in Dribbble photos. 2014 has been largely characterised by two pixel borders with a range of vibrant colours.

2015

Over the course of just a few months, Google’s Material Design quickly became a beloved guideline for UI designers. This design’s smooth top buttons with a subtle shadow beneath underscore the substantial impact it has had on modern trends. It is remarkable to consider the sheer number of people who incorporate this style into their work.

2016

Designers often strive to innovate by combining Material and Flat Design to create novel looks. Gradients can be used to add a subtle hint of three-dimensional design to the surface of buttons, giving them a warm, glowing appearance and adding colour shadows for extra depth.

2017

I am intrigued to consider how I will reflect on this year eight years from now. Until this point, 2020 has been characterised by a minimalist aesthetic and the prevalence of flat design. However, we are constantly looking for new and innovative forms of expression. Thanks to the advanced state of technology and the resources available to us, the only limits to our creativity are the boundaries of popular trends and fashion.

What Comes Next?

It is uncertain how long the evolution of button styles will persist. Nevertheless, it is certain that the evolution of button styles will continue. Possible causes of this evolution may include increasing technological advancement, greater designer awareness, or a desire for something new and different.

It is undeniable that buttons are preparing for another transformation. Could this transformation potentially be the end of buttons? As technology continues to evolve, with the development of gesture, intuitive interactions, augmented and virtual reality, and sound user interfaces, will the buttons which have been a part of our lives for so long still be a necessity?

Join the Top 1% of Remote Developers and Designers

Works connects the top 1% of remote developers and designers with the leading brands and startups around the world. We focus on sophisticated, challenging tier-one projects which require highly skilled talent and problem solvers.
seasoned project manager reviewing remote software engineer's progress on software development project, hired from Works blog.join_marketplace.your_wayexperienced remote UI / UX designer working remotely at home while working on UI / UX & product design projects on Works blog.join_marketplace.freelance_jobs