Clay lavender wide

Clay lavender wide: a CSS button. Copy the rules, or the prompt that rebuilds it.

claymorphismfull-widthsoftpastelsubtitle

CSS

.btn-134 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  font: 700 16px/1 system-ui,sans-serif;
  color: #3b0764;
  background: #d8b4fe;
  border: 0;
  border-radius: 24px;
  padding: 18px 24px;
  cursor: pointer;
  box-shadow: inset -6px -6px 14px #b57ef5,inset 6px 6px 14px #efdcff,0 10px 24px #d8b4fe66;
  transition: transform .2s,box-shadow .2s
}
.btn-134 small {
  font: 500 12px/1 system-ui,sans-serif;
  color: #6b21a8
}
.btn-134:hover {
  transform: translateY(-2px);
  box-shadow: inset -6px -6px 14px #b57ef5,inset 6px 6px 14px #efdcff,0 14px 30px #d8b4fe77
}
.btn-134:focus-visible {
  outline: 3px solid #6b21a8;
  outline-offset: 3px
}
.btn-134:active {
  transform: translateY(1px);
  box-shadow: inset -3px -3px 6px #b57ef5,inset 3px 3px 6px #efdcff,0 4px 10px #d8b4fe66
}

HTML

<button class="btn-134">Start free trial<small>No card needed</small></button>

Prompt

A full-width lavender #d8b4fe clay button, 24px radius, 18px by 24px padding, stacking a 16px bold #3b0764 label over a 12px #6b21a8 subtitle. Puffy inset shadows (#b57ef5 bottom-right, #efdcff top-left, 14px blur) and a lavender drop shadow 10px below. Hover lifts 2px with a bigger shadow; active drops 1px and shallows the insets. Focus 3px purple outline.

Clay lavender wide

Same shelf