Design for AIBlob que se transforma
Blob que se transforma: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.
CSS
.btn-111 {
font: 700 15px/1 system-ui,sans-serif;
color: #fff;
background: #0ea5e9;
border: 0;
border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
padding: 18px 34px;
cursor: pointer;
transition: border-radius .6s ease-in-out,background .3s
}
.btn-111:hover {
border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
background: #0284c7
}
.btn-111:focus-visible {
outline: 3px solid #0ea5e9;
outline-offset: 4px
}
.btn-111:active {
border-radius: 50%/50%;
background: #0369a1
}
HTML
<button class="btn-111">Splash</button>Prompt
Um botão azul céu #0ea5e9 em forma de blob orgânico usando um border-radius assimétrico de 8 valores (60% 40% 30% 70% / 60% 30% 70% 40%), texto branco de 15px bold, padding de 18px por 34px. No hover o raio se transforma em 600ms para outra forma de blob e a cor aprofunda para #0284c7; no active vira uma elipse em #0369a1. Foco com outline azul de 3px e offset de 4px.