Herramientas

Obtén el CSS de los botones de cualquier web

Escribe la dirección de una web y obtén el CSS de sus botones: cada variante con su fondo, color del texto, borde, radio y tamaño, además de hover y focus.

Prueba constripe.comlinear.appairbnb.com

linear.app

Medido hace 4 días.

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;
}

Cómo funciona

Stylepack abre el sitio en un navegador real, mide lo que se renderiza (no lo que dice la hoja de estilos) en cuatro anchos y en ambos temas, y guarda el resultado como un paquete de diseño. Un sitio ya medido responde al instante; uno nuevo tarda menos de un minuto. Cada valor de esta página sale de ese paquete.

Preguntas

¿Qué botones se miden?

Las variantes primary, secondary y ghost que se encuentran en la página, cada una medida en reposo, en hover y en focus. El CSS tiene una clase por variante con los valores medidos.

¿Por qué mi botón sigue viéndose distinto?

Los botones dependen de su fuente: pon en el botón la fuente que usa el sitio (indicada en el resultado) y cárgala primero, o carga su sustituta gratuita. El paquete de diseño lleva la pila de fuentes y el resto del sistema.

¿Puede usar esto un agente de programación con IA?

Sí. Pega el CSS, o entrega al agente el paquete de diseño del sitio: contiene cada variante con sus estados, los colores, la tipografía y capturas con las que comparar.