Ícone de argila menta

Ícone de argila menta: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

claymorphismcircleiconsoftpastel

CSS
.btn-133 {
  width: 60px;
  height: 60px;
  display: inline-grid;
  place-items: center;
  color: #065f46;
  background: #86efac;
  border: 0;
  border-radius: 22px;
  cursor: pointer;
  box-shadow: inset -5px -5px 10px #4ade80,inset 5px 5px 10px #bbf7d0,6px 6px 14px #86efac66;
  transition: transform .2s,color .2s,box-shadow .2s
}
.btn-133:hover {
  color: #e11d48;
  transform: rotate(-6deg) scale(1.05)
}
.btn-133:focus-visible {
  outline: 3px solid #065f46;
  outline-offset: 3px
}
.btn-133:active {
  transform: scale(.94);
  box-shadow: inset -2px -2px 5px #4ade80,inset 2px 2px 5px #bbf7d0,2px 2px 6px #86efac66
}
HTML
<button class="btn-133" aria-label="Like"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-7-4.6-9.3-8.6C.7 8.8 2.6 5 6.3 5c2 0 3.4 1 4.2 2.4 1-1.4 2.3-2.4 4.2-2.4 3.7 0 5.6 3.8 3.6 7.4C19 16.4 12 21 12 21z"/></svg></button>
Prompt

Um botão de argila quadrado de 60px com raio de 22px em menta #86efac contendo um ícone de coração inline em verde escuro #065f46. Sombras inset fofas (#4ade80 no inferior direito, #bbf7d0 no superior esquerdo, blur de 10px) e uma sombra externa menta. No hover o coração fica rosé #e11d48 e o botão inclina -6deg em escala 1.05; no active se achata para 0.94. Foco com outline verde escuro de 3px.