SKEUOMORPHIC BUTTONS WITH REALISTIC 3D EFFECT

Author:

  • Jouan Marcel
  • November 14, 2019

Made with:

  • HTML (Pug) / CSS (Sass)

About the code:

This is an amazing Button with skeuomorphism which was used on the earlier iPhones and was made popular by it as well for UI design. It got mostly deprecated by flat design, as skeuomorphic elements are harder to create, maintain and scale across different platforms. You will notice, that the style doesn’t work out nicely when you change a single color like the background. Play with it, learn what happens and how it is done, but I would not recommend using it on your website/app. It’s 2020 anyway and skeuomorphism is still out, otherwise, you should at least wait a couple of years till it’s considered vintage, retro and trendy again.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: No

Dependencies:

Download Demo and Code