3D Button Anatomy (+ video tutorial on how to create one)
In my previous article, I explained two fundamental principles of Lights and Shadows. And with the help of those two principles, today, I will explain the anatomy of a 3D button, so let’s get started.
You might have seen the anatomy of a button before, but I’m sure you haven’t seen the anatomy of a 3D Button. 2D and 3D Buttons are pretty similar; we can add two essential properties to a 2D button to convert it into a 3D one.
Let’s see what those two properties are, but before that, let’s explore the basic anatomy of a button.
Basic Anatomy
I’ve marked down some of the essential properties of a 2D Button in the above image. Let’s take a closer look at each property one by one.
Background: As you’ve already guessed from its name, it’s the background of a button. The labels and icons (if any) are placed on top of the background, usually in the centre.
Label: The label is the content that we want the user to see. It tells the user what the button will do when clicked. You can also add icons with the label, or you can also make icon-only buttons. Make sure your label has a contrasting colour with the background so that users can read it easily.
Corner Radius: A corner radius can dramatically change the look and feel of your button. Make sure you use it properly. The more you increase the corner radius, the more friendly button starts to look.
Padding: Ther padding is space around an element’s content, inside of any defined borders. In this case, it is the space between the label and the boundary of our background.
Margin: Margins are used to create space around elements outside of any defined borders. In this case, it is the space outside the boundary of the background.
3D Button Anatomy
The anatomy of a 3D Button remains the same as that of a 2D Button, but two properties get added. Let’s take a look at those two properties.
Shadow: The first one is the obvious one; a 3D Button must have a shadow, no matter how big or small, how blurry or sharp.
In the previous article, I’ve discussed two fundamentals of lights and shadows, and the first is that Light always comes from the top. And it also applies to interface design. It means a shadow always forms at the bottom.
Highlight: An area (usually on the top side of the button) slightly or highly brighter than the rest of the button. This is not required, but adding this subtle property to our button can make it look a lot more realistic.
As I’ve already explained in my previous article, whenever a subject is casting a shadow, there’s also a place where the light source is directly hitting the subject, which means that area will be brighter.
Figma Tutorial
I recently uploaded a video on YouTube where I created the above 3D Button from scratch inside Figma. You can watch the tutorial above.
I upload quality design videos every Monday; you can subscribe to avoid missing my future videos.
Thanks 😊
So, that’s pretty much it. I hope you found this article helpful. You can share this article with your designer friends so that they also learn something valuable.
Thank you again for sticking it till the end. I will see you in my next article. Till then, take care and bye.
