CSS shadow awesome effect - css

Question

I have wasted 2 days to create a shadow effect like here.
You see, the front white buttons look not flat, don't know how to describe. I bet this is because of box shadow effect, inset or something like that. But I can't make the same.
Can anyone help to make such a button with the same design, effect?
My example
.button {
background-size: 400% auto;
background: linear-gradient(to top right, rgb(247, 212, 167), #eef2f3);
border-radius: 7%;
box-shadow: inset 4px -4px 1px 1px rgb(252, 205, 144), inset -4px 4px 1px 1px white, -15px 25px 25px 0px rgba(0, 0, 0, .3);
width: 200px;
height: 200px;
-webkit-transition: all .1s linear;
transition: all .2s linear;
left: 0;
transform: rotate(45deg);
}
<div class="button main-circle"></div>

Answer 1

Here is an idea using some gradient and pseudo elements:
.box {
width: 100px;
height: 100px;
margin: 100px;
border: 3px solid #e0e1e6;
border-radius: 10px;
background: linear-gradient(to right, #b9b7dc, #a7a7c9);
transform: rotate(45deg);
position: relative;
z-index: 0;
box-sizing: border-box;
}
.box:before {
content: "";
position: absolute;
z-index: 2;
top: 30%;
left: -32%;
width: 100px;
height: 100px;
border: 3px solid #fefefe;
border-radius: 10px;
background: linear-gradient(to right, #e0e0e0, #fefefe);
box-sizing: border-box;
}
.box:after {
content: "";
position: absolute;
z-index: 1;
top: 30%;
left: -31%;
width: 100px;
height: 100px;
border-radius: 10px;
background: linear-gradient(to right, rgba(0,0,0,0.3),rgba(0,0,0,0.1));
box-sizing: border-box;
transform: skewY(11deg) scaleX(1.15);
filter: blur(4px);
transform-origin: top left;
}
body {
background: pink;
}
<div class="box"></div>