Clay Mint-Icon

Clay Mint-Icon: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein 60px quadratischer Clay-Button mit 22px Radius in Mint #86efac mit einem Inline-Herz-Icon in Dunkelgrün #065f46. Aufgeplusterte Inset-Schatten (#4ade80 unten rechts, #bbf7d0 oben links, 10px Blur) und ein Mint-Drop-Shadow. Beim Hover wird das Herz rosé #e11d48 und der Button kippt -6deg bei 1.05 Scale; active quetscht auf 0.94. Fokus 3px dunkelgrüne Outline.