Claymorphism Success Check Mark

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="clay-check" aria-label="Success">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
    <polyline points="20 6 9 17 4 12"></polyline>
  </svg>
</button>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.clay-check {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 16px;
  background: #bbf7d0;
  color: #15803d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 8px 8px 16px #a3e635,-4px -4px 12px #ffffff, inset 2px 2px 4px #dcfce7;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.clay-check svg {
  width: 20px;
  height: 20px;
}
.clay-check:active {
  transform: scale(0.92);
  box-shadow: 2px 2px 6px #a3e635, inset 2px 2px 4px #15803d;
}