What is Neomorphism Neumorphism?

Neomorphism/Neumorphism is a relatively new trend which is starting to take hold in the world of UI design, it tries to merge some of the concepts of flat design and the somewhat older UI concept of Skeuomorphism.

Skeuomorphism is a term most often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them

Neumorphism is a visual style that blends techniques from skeuomorphism, realism, and flat design, to create a more modern-feeling take on the older concept. Essentially, it's a new, minimal way to design with a soft, extruded plastic look.

What I wanted to do

I was looking to create some sort of UI using the concepts of this trend, and so thought I'd go for a relatively simple thing of a Calculator.

I wanted the buttons to feel realistic in some way, and to that end I looked for some recommendations online, and a often recommend tool was https://neumorphism.io as it gives a nice system for designing neumorphic ui elements.

I designed it so that in the untouched state, they had a extruded look to them, akin to physical buttons, upon hover, they would go somewhat flat, and on press they would have a look that they had been pressed inwards.

Inactive State

Active State
(the "8" button is clicked)

In review

I actually spent way too long trying to come up with a custom math evaluation function, as I started adding that functionality later in the day, and somehow entirely forgotten about the far simpler option of using eval, especially as I didn't have to worry about invalid inputs crashing the app (as the inputs were restricted by myself).

The final product

https://codepen.io/GeorgeWL/full/yLeXxpM