# Arcilla lavanda ancha (B 134)

Categoría: Botones  
Etiquetas: claymorphism, full-width, soft, pastel, subtitle  
Página: https://designforai.dev/es/snippet/btn-134

## 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.

## HTML

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

## CSS

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