body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#0b0b0b;
  font-family:Arial, Helvetica, sans-serif;
}

/* BUTTON */
.blob-btn{
  position:relative;
  width:320px;
  height:100px;
  border-radius:100px;
  text-decoration:none;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:28px;
  font-weight:700;
  letter-spacing:2px;
  color:white;
  overflow:hidden;
}

/* flat coffee border */
.blob-btn::before{
  content:"";
  position:absolute;
  inset:0;
  padding:4px;
  border-radius:100px;

  background:#6f6a4e;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite:xor;
          mask-composite:exclude;
}

/* TEXT */
.blob-btn span{
  position:relative;
  z-index:3;
}

/* SVG container */
.blob-btn svg{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:300%;
  transform:translateY(120%);
  transition:transform .7s cubic-bezier(.65,.05,.36,1);
  z-index:1;
}

/* coffee blob fill */
.blob-btn path{
  fill:#d4d0c1;
}

/* blob rises */
.blob-btn:hover svg{
  transform:translateY(20%);
}