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.
.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.