Design for AIArgila lavanda larga
Argila lavanda larga: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.
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
Um botão de argila lavanda #d8b4fe de largura total, raio de 24px, padding de 18px por 24px, empilhando um rótulo de 16px bold #3b0764 sobre um subtítulo de 12px #6b21a8. Sombras inset fofas (#b57ef5 no inferior direito, #efdcff no superior esquerdo, blur de 14px) e uma sombra externa lavanda 10px abaixo. No hover sobe 2px com uma sombra maior; no active desce 1px e deixa os insets mais rasos. Foco com outline roxo de 3px.