Clay Lavendel breit

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

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

Ein lavendelfarbener #d8b4fe Clay-Button in voller Breite, 24px Radius, 18px mal 24px Padding, der ein 16px bold #3b0764 Label über einem 12px #6b21a8 Untertitel stapelt. Aufgeplusterte Inset-Schatten (#b57ef5 unten rechts, #efdcff oben links, 14px Blur) und ein Lavendel-Drop-Shadow 10px darunter. Hover hebt 2px mit größerem Schatten; active rutscht 1px ab und flacht die Insets ab. Fokus 3px lila Outline.

Clay Lavendel breit

Gleiches Regal