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.

Contact salesSign inProducts
buttons.css
.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.