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

linear.app

Medido há 4 dias.

Sign upPerformanceProduct
buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0px 12px;
  background: #e5e5e6;
  color: #08090a;
  border: 1px solid #e5e5e6;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 510;
  font-family: "Inter Variable", sans-serif;
  box-shadow: rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0px 11px;
  background: transparent;
  color: #d0d6e0;
  border: 1px solid #2e2e32;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 400;
  font-family: "Inter Variable", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0px 12px;
  background: transparent;
  color: #8a8f98;
  border: none;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 400;
  font-family: "Inter Variable", 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.