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
airbnb.com
Medido hace 4 días.
.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;
}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.