Dribbble Timeline of Button Design

The world of digital design and user interface development has made incredible strides over the past ten years, most notably in button style trends. The Dribbble Button Timeline paints a clear picture of this evolution.

Web design has been advancing rapidly in recent times with evolving trends. Website navigation is an integral part of the design process and a call-to-action button is a powerful tool in achieving this. Buttons efficiently facilitate diverse online activities such as purchase transactions, banking applications, and provision of sensitive information while filling out forms. Evidently, the successful implementation of well-designed buttons has a considerable impact on website usability and overall success.

This essay will explore the history of online button design over the past eight years, using Dribbble as a reference.

Evolution of Dribbble Buttons

Established in 2009, Dribbble is a platform for designers from across the globe to showcase snippets of their ongoing projects. Dribbble provides a comprehensive insight into button trends and designs over the past eight years. To delve deeper into this concept, an interactive timeline of button styles was created by studying thousands of images from Dribbble.

The Year 2009

This year commemorates the 40th anniversary of the internet, with the first “shots” of button designs making an appearance on Dribbble. These designs primarily feature the use of greyscale, with most button designs adopting gentle gradients, rounded edges, and shadows, inspired by native system buttons.

The Year 2010

The year 2010 saw the launch of Instagram, with its button designs remaining relatively unchanged since then. However, there have been several updates that included additional colours, new features like inner shadows, and decorative text incorporated in the design.

The Year 2011

The year 2011 witnessed the arrival of CSS3, with the number of internet users surging to a record one billion. Skeuomorphism, an approach in which design elements imitate real-world objects, continued to be a popular trend among designers who remained eager to explore further possibilities and applications. Despite the absence of guidelines on using light and shadow effects, these components continued to feature in projects and were dependable in producing the desired results.

The Year 2012

The year 2012 witnessed the decline of skeuomorphism, with some designers reaching the apex of their mastery over the technique, while others sought out more modern and innovative approaches to design. This shift in design trends was evident in the emergence of flat design, which was gaining ground at a steady pace.

The Year 2013

The launch of iOS7 in 2013 saw Apple showcase their dedication to the emerging trend of ‘flat design’, shedding all skeuomorphic elements deliberately. This marked the inception of a trend that continues to be embraced by designers today, with many designers on Dribbble foregoing three-dimensional elements and opting for a two-dimensional ‘flat’ aesthetic instead.

The Year 2014

Google’s recent reveal of their Material Design did not appeal to all designers who opted not to employ it entirely. The year 2014 has been a stimulating one, with the emergence of the ‘ghost button’ or flat button style, which is widely used and frequently spotted in Dribbble photos. This year was predominantly defined by two-pixel borders featuring an array of lively colours.

The Year 2015

Within a matter of months, Google’s Material Design became a beloved guideline for UI designers. The design’s smooth top buttons, embellished with a subtle shadow, highlight the significant impact it has had on contemporary trends. It’s astounding to contemplate the sheer number of individuals who integrate this method into their work.

The Year 2016

Designers frequently aim to innovate by merging Material and Flat Design techniques to produce fresh aesthetics. Gradients can be employed to impart a gentle hint of 3D design to button surfaces, lending them a warm, radiant appeal, and employing colour shadows for further dimension.

The Year 2017

I am curious about how I will reflect back on this year in another eight years. So far, 2020 has been identified by a austere aesthetic and the dominance of flat design. However, we are forever seeking new and inventive ways of expression. With the help of the advanced technology and resources at our disposal, the only constraints to our creativity are the restrictions of current trends and fads.

What Lies Ahead?

It’s unclear for how long the progression of button styles will endure. However, it’s definitive that the transformation of button styles will remain constant. The likely drivers of this evolution could comprise of the rising technological advancements, heightened designer consciousness or the need for something unique and fresh.

There is no doubt that buttons are on the verge of another metamorphosis. Is this upcoming transformation likely to be the end of buttons entirely? As technology continues to advance, with the introduction of intuitive interactions, augmented and virtual reality, sound user interfaces and gestures, will buttons that have been an integral part of our lives for so long still be essential?

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