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