Arcilla lavanda ancha

Arcilla lavanda ancha: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón de arcilla lavanda #d8b4fe de ancho completo, radio de 24px, padding de 18px por 24px, que apila una etiqueta de 16px en negrita #3b0764 sobre un subtítulo de 12px #6b21a8. Sombras inset mullidas (#b57ef5 abajo a la derecha, #efdcff arriba a la izquierda, desenfoque de 14px) y una sombra lavanda 10px por debajo. Al pasar el cursor se eleva 2px con una sombra mayor; en active baja 1px y reduce los insets. Foco con outline púrpura de 3px.

Arcilla lavanda ancha

Misma estantería