Design for AICortina dividida
Cortina dividida: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.
CSS
.btn-061 {
position: relative;
overflow: hidden;
font: 600 14px/1 system-ui,sans-serif;
color: #047857;
background: transparent;
border: 2px solid #047857;
border-radius: 8px;
padding: 12px 26px;
cursor: pointer;
z-index: 0;
transition: color .3s
}
.btn-061::before,.btn-061::after {
content: "";
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: #047857;
transition: transform .3s;
z-index: -1
}
.btn-061::before {
left: 0;
transform: translateX(-100%)
}
.btn-061::after {
right: 0;
transform: translateX(100%)
}
.btn-061:hover {
color: #fff
}
.btn-061:hover::before,.btn-061:hover::after {
transform: translateX(0)
}
.btn-061:focus-visible {
outline: 2px solid #047857;
outline-offset: 3px
}
.btn-061:active::before,.btn-061:active::after {
background: #065f46
}
HTML
<button class="btn-061">Open</button>Prompt
Um botão outline esmeralda (borda de 2px #047857, texto esmeralda, raio de 8px, padding de 12px por 26px). No hover dois painéis de meia largura deslizam ao mesmo tempo das arestas esquerda e direita e se encontram no meio (300ms), preenchendo tudo de esmeralda enquanto o texto fica branco. Active #065f46. Outline de foco de 2px esmeralda.