I'm trying to recreate [Alexander Plyuto's modern skeumorphic style](https://dribbble.com/shots/8297803-Skeuomorph-Mobile-Banking-Continuation) (now called [neumorphism](https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6)) in CSS:

[![enter image description here](https://i.stack.imgur.com/ZXWJr.png)](https://i.stack.imgur.com/ZXWJr.png)

I'm attempting to do this by having a colored shadow on the top and left, and a differently colored shadow on the bottom and right.

I researched [MDN for `box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) and I can see `box-shadow` supports multiple values, but rather than being top-right-bottom-left like the rest of CSS, multiple values are actually full-size shadows for all sides that are stacked on top of each other:

> 
> The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).
> 
> 
> 

Is it possible to create this effect in CSS?

Note that 'no' is an acceptable answer, but creating additional HTML (ie, not using CSS) is not. Buttons in HTML are normally represented by `<button>A button</button>`