An exploratory study on creating realistic buttons

The beginning

Buttons are the backbone of any UI design, serving multiple purposes such as providing feedback, initiating actions, and ultimately enhancing the overall user experience. In recent times, we've witnessed a fascinating shift towards designing buttons that go beyond the ordinary. The goal is to create buttons that mimic real-world objects, engaging our senses and eliciting a unique user response.

(Imagine a button so authentic-looking and delightful that you can't help but imagine giving it a lick – metaphorically speaking, of course!)

Why are realistic buttons so important? By infusing UI design with tactile and sensory elements, we can create immersive experiences that captivate users and leave a lasting impression. This holds particular significance for applications and websites that heavily rely on user engagement for success.In this document, join me on a journey as I delve into the art of crafting a truly realistic and "clickable" button.

To gain valuable insights into building reusable components for creating these mesmerizing 'clickable' buttons in modern apps, I embarked on an exploration of popular and highly regarded applications like Linear and Campsite. My objective was to unravel the logical methods employed by these app's designers and developers to construct scalable components. From there, I sought to develop my own unique approach to creating such components.

While Linear used a very simple and time-tested method of  a combination of button border and a single drop shadow to signify elevation on their buttons, as if they were “coming out of the screen”, Campsite used a more detailed approach where they took real-world light reflection and shadow dispersing into consideration and created a component with several drop-shadows to mimic a real object. The buttons stood out instantly and it looked like you can feel the bump on your screen. Here is a brief description of shadow types in traditional media.

The search for answer...

Obsessively, I was following the works of the designers from Campsite on Twitter, and I found the James the designer from Tailwind labs, having a similar obsession for clickable button, shared a tutorial in a Twitter thread, which used a translucent border, an inner-shadow for volume and a drop-shadow for creating these buttons in Figma, which closely matched the Campsite design. It was the simplest and yet effective solution.

But I needed more. You aim for the stars and then only land on the moon. 🤷🏻

On close inspection after replicating James’ method, I realised the inner-shadow property that is being used to define the occlusion shadow, helping to give the button a sense of form, had a very sharp edge which I was not very fond of.

So I added 1px blur to it which blended it nicely. I also added a very subtle linear-gradient to the Fill, to bring more volume to it.

Now see the difference of sharp shadow edge:

But I was not too happy with the result as the button looked good only on surfaces that were not completely white (#FFFFFF), as its translucent border’s purpose was to mingle with the surface below. Also, the blended inner-shadow made it look like a early 2000’s poorly done skeuomorphic graphics rather than a component one would feel like touching, because no shadow in real life blends so nicely like that.

Additionally, there was this issue of the button’s visual height being more than the calculated height, as the border or outline around it was not counted inside the bounding-box, rendering the true size of the button relative.

There was one way I could replicate the true design was putting the button inside an auto-layout (Flexbox for devs) frame, just 2px larger than the button itself. This allowed the shadow to overflow on the “border” (which was nothing but the background of the auto-layout frame.

This did solve the design problem, but not many developer would be inclined to build a button with Flexbox. And so my search continued.

One of them was Derek Briggs, who came forward and shed more light on how they design such button, after James posted his tutorial.

In the above thread, Derek spoke at length about the issues of designing such button and the practices developers can adapt to create a “real-looking” button, by using the background-clip property in CSS, and thus being able to use a border around the button without any issue.

Although, he didn’t provide a straightforward way to replicate such button in Figma (yet), he did provide a glimpse into the logic of such design. It mimics traditional methods of showing volume to a flat surface: by showing bouncing of light, the gradual transgression of shadows, occlusion shadows and cast shadows.

By using his method, I was able to replicate a button that follows all the above criteria. But I not only tweaked introduced a shadow of larger radius but also eliminated the border and created the border with shadows. It turned out pretty good — still not there yet, but pretty good.

Derek also provided a CodePen link where he described how these buttons are made in practice. This was same as what we observed in the code-inspector in the beginning, obviously. I made a button in Figma following the shadow-properties in that codeblock.

This was obviously closest to perfection, but I wanted to reduce the shadows being used. They did take away the need for adding border, and they did mimic a real-looking cast shadow, but they were extensive, in my opinion and too subtle to notice. If it was subtle for the end-user seeing it on a high-resolution macbook, it was definitely undetectable for the end-user with a budget windows laptop, and that percentage is higher than the former.

In short, they were great, but I needed to simplify the solution more.

While I kept on experimenting, Derek released a Figma community file which replicated the design he demonstrated in code previously. Unfortunately, that Figma file is now unavailable, so below is an older copy that got saved in my drafts.

Reaching the Nirvana...

But…it used even more shadows than it demonstrated in the code previously. 6 drop-shadows and 3 inner-shadows! There gotta be a way to have simpler solution. Plus, this solution used a drop-shadow to mimic the border instead of an inner-shadow, and thus the problem of absolute height and visual height came back as the shadow was not being counted inside the bounding box of the button.

So I gathered all my resources, and tried to think it from a painter’s point of view. We have a flat surface — how would we create volume? We have to
1. set direction of light,
2. create darkest dark,
3. and lightest light
4. add a twilight zone or transition between the light and dark
5. add reflected light (that bounce off the surface)
6. add highlights and
7. add a drop shadow

Now the drop shadow does not need to be elaborated because it will be very subtle anyways, and the twilight zone can be taken care of by adding a linear-gradient as fill.

We can see the same pattern if we inspect Derek’s button.

Also, I would like to point out the whole deal about these kinds of buttons from Campsite is that the first occlusion shadow flows over the border.

This is somewhat important because it shows how different shadows can overlay on each other and create complex forms, giving a sense of a real object. But doing this means either we have to use an outside border or use a drop shadow to create the border of the button, and in both cases, the occlusion shadow will flow over the border. However, the absolute size of the button and the relative size of the button will be different, i.e., the border area will not be counted as the button's height or width.

This problem we can solve to some extent by overlaying inner-shadows but not completely and that is okay because at the end, it’s the end effect that matters way more than particularities, regardless how it is achieved. If we can bring volume and elevation to our button without overflowing shadows on borders, it will still mimic a real object for the end-user.

So, to create our button we will use a total of 7 shadows:
1. Background fill with linear-gradient
2. Inner shadow 1 to show Highlight
3. Inner shadow 2 to show uneven convex surface
4. Inner shadow 3 to create the sense of border
5. Inner shadow 4 to flow shadow over the border
6. Drop shadow 1 as Occlusion shadow
7. Drop shadow 2 and 3 as Cast shadow

In this image, you can see both Campsite's button and the button we are creating today, without drop-shadows. The button we are creating has a tactile appearance, as if you could feel its bump by running your fingers along the screen.

Now, after adding some simple drop-shadows, our button comes to life! Also there are hardly any difference in effect and both the buttons look realistic!

The same technique can also be used for coloured buttons, by modifying the highlight inner-shadow a little. We can either completely omit it or set it to pure white (#FFFFFF) and 15% opacity, so that it blends nicely with the given colour.

And thus we can create a whole component set of realistic buttons.

The secret to create realistic components is that everything boils down to the effect that you produces at the end, and it can be achieved many different ways.By the way, to treat you for going through the long article, here is a lickable button. Click it, lick it, I won’t look 🙈