Design for AICopiar link com feedback
Copiar link com feedback: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.
CSS
.btn-187 {
display: inline-flex;
align-items: center;
gap: 8px;
font: 500 14px/1 system-ui,sans-serif;
color: #374151;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 10px 16px;
cursor: pointer;
transition: background .15s,color .15s,border-color .15s
}
.btn-187:hover {
background: #fff;
border-color: #9ca3af;
color: #111827
}
.btn-187:focus-visible {
outline: 2px solid #374151;
outline-offset: 3px
}
.btn-187:active {
background: #dcfce7;
border-color: #16a34a;
color: #166534
}
.btn-187:active span {
font-size: 0
}
.btn-187:active span::after {
content: "Copied";
font-size: 14px
}
HTML
<button class="btn-187"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg><span>Copy link</span></button>Prompt
Um botão de copiar link: cinza #f9fafb com borda de 1px #e5e7eb, raio de 8px, texto #374151 14px medium com um ícone inline de corrente de 15px, padding 10px por 16px. No hover fica branco com borda mais escura. Enquanto pressionado o botão pisca verde (#dcfce7, borda #16a34a, texto #166534) e o label passa a mostrar "Copied" via troca com font-size zero no span. Focus com outline escuro de 2px. A cópia real para a área de transferência precisa de uma linha de JS.