# Clay mint icon (B 133)

Category: Buttons  
Tags: claymorphism, circle, icon, soft, pastel  
Page: https://designforai.dev/snippet/btn-133

## Prompt

A 60px square clay button with 22px radius in mint #86efac holding an inline heart icon in dark green #065f46. Puffy inset shadows (#4ade80 bottom-right, #bbf7d0 top-left, 10px blur) and a mint drop shadow. On hover the heart turns rose #e11d48 and the button tilts -6deg at 1.05 scale; active squishes to 0.94. Focus 3px dark green outline.

## HTML

```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>
```

## CSS

```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
}
```