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.

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

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.