Ferramentas
Pegue o CSS dos botões de qualquer site
Digite o endereço de um site e receba o CSS dos botões dele: cada variante com seu fundo, cor do texto, borda, raio e tamanho, mais hover e focus.
Experimentestripe.comlinear.appairbnb.com
stripe.com
Medido há 4 dias.
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 11.5px 20px;
background: #533afd;
color: #ffffff;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
font-family: "sohne-var", sans-serif;
cursor: pointer;
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 10.5px 20px;
background: transparent;
color: #533afd;
border: 1px solid #ffffff;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
font-family: "sohne-var", sans-serif;
cursor: pointer;
}
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 12px 0px;
background: transparent;
color: #061b31;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
font-family: "sohne-var", sans-serif;
cursor: pointer;
}Como funciona
O Stylepack abre o site em um navegador de verdade, mede o que é renderizado (não o que a folha de estilos diz) em quatro larguras e nos dois temas, e guarda o resultado como um pacote de design. Um site já medido responde na hora; um novo leva menos de um minuto. Todo valor nesta página vem desse pacote.
Perguntas
Quais botões são medidos?
As variantes primária, secundária e ghost encontradas na página, cada uma medida em repouso, em hover e em focus. O CSS tem uma classe por variante com os valores medidos.
Por que meu botão ainda fica diferente?
Botões dependem da fonte: defina a fonte do botão como a que o site usa (indicada no resultado) e carregue primeiro essa fonte, ou a substituta gratuita. O pacote de design traz a pilha de fontes e o resto do sistema.
Um agente de código com IA pode usar isso?
Sim. Cole o CSS, ou entregue ao agente o pacote de design do site: ele contém cada variante com seus estados, as cores, a tipografia e capturas de tela para comparar.