Creating a Skeuomorphic button

Recently I’ve been taking much joy in following the latest of skeuomorphic aesthetic sweeping across design Twitter by creating my own tactile buttons with realistic lighting in Figma.

Over the weekend, I stumbled upon some decade-old designs on Dribbble that sport the skeuomorphic aesthetic. I was directly inspired by this design and wanted to try my hand at re-creating an improved, higher resolution version in Figma.

image

In addition to creating the button in Figma, I was also inspired to create the button using HTML and CSS code. I’ve shared the code for the button on CodePen, which you can view a live demo of below:

To see how I created the buttons in Figma, check out my step-by-step walkthrough in this Twitter thread ↓