UnNeoMorph

by amindunited

HTML

<div id="root">

  <div class="paper">
    <div class="nu-btn">
      µ
    </div>
    <div class="nu-btn down">
      µ
    </div>
    <div class="nu-btn-con">
      µ
    </div>

  </div>


</div>

CSS

* {
  box-sizing: border-box;
}
htnl, body {
  margin: 0;
  padding: 0;
}
#root {
  width: 100vw;
  height: 100vh;
  }
  
.paper {
  width: 80%;
  min-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  background-color: #efefef;
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 0.2px, transparent 0.2px, transparent 0.8px),
                    repeating-linear-gradient(-90deg, rgba(126, 126, 126, 0.15), rgba(126, 126, 126, 0.15) 0.1px, transparent 0.2px, transparent 0.4px),
                    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 0.2px, transparent 0.2px, transparent 0.8px),
                    repeating-linear-gradient(90deg, rgba(126, 126, 126, 0.15), rgba(126, 126, 126, 0.15) 0.1px, transparent 0.2px, transparent 0.4px);
}



.nu-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  
  background: linear-gradient(145deg, rgba(126, 126, 126, .3), rgba(256, 256, 256, .5));
  
  box-shadow: 0.15em 0.15em 0.3em 0.01em rgba(126, 126, 126, 0.5),
              0.02em 0.02em 0.05em 0.01em rgba(0, 0, 0, 0.5),
              inset -0.15em -0.15em 0.3em 0.01em rgba(256, 256, 256, 0.5),
              inset 0.01em 0.02em 0.1em 0.01em rgba(256, 256, 256, 0.5);
  padding: 2rem;
}

.nu-btn.down, .nu-btn:hover {
  /* Not right
  background: radial-gradient(
        ellipse at bottom right,
        rgba(0,0,0,0.3) 0%,
        rgba(255,255,255, 0.23) 10%,
        rgba(178,178,178, 0.1) 45%,
        rgba(29,29,29,0.2) 76%,
        rgba(0,0,0,0.2) 82%,
        rgba(0,0,0,0.2) 99%,
        rgba(0,0,0,0.2) 100%
      ), radial-gradient(
        ellipse at center,
        rgba(0,0,0, 0.1) 0%,
        rgba(255,255,255, 0.2) 100%
      );
  */
/*
background: linear-gradient(55deg, rgba(126, 126, 126, .2), rgba(256, 256, 256, .1)),
            radial-gradient(ellipse at top left,
               ...