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
airbnb.com
Medido há 4 dias.
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 35px;
padding: 0px 16px;
background: #ffffff4d;
color: #000000;
border: none;
border-radius: 100px;
font-size: 14px;
font-weight: 400;
font-family: "Airbnb Cereal VF", sans-serif;
box-shadow: rgba(218, 218, 218, 0.6) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.12) 0px -0.502px 1.004px 0px, rgba(0, 0, 0, 0.04) 0px -1.5px 3.5px 0px, rgba(0, 0, 0, 0.05) 0px 3px 5px 0px, rgba(0, 0, 0, 0.2) 0px 0.75px 1px 0px inset, rgba(34, 34, 34, 0.6) 0px -0.5px 5px 1px inset, rgba(0, 0, 0, 0.16) 0.502px 0.5px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px -3px 7px 0px inset, rgba(0, 0, 0, 0.05) 0.502px 2px 4px 0px inset, rgba(0, 0, 0, 0.04) 1.004px 4px 4px 0px inset, rgba(184, 72, 155, 0.2) 0px -3px 7px 0px inset;
cursor: pointer;
}
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 11px 12px;
background: transparent;
color: #222222;
border: none;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
font-family: "Airbnb Cereal VF", 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.