Stylepack

Botones

Los botones de gitnimble.com

El botón principal de gitnimble.com es #f2f3f5 con texto #8a8d94, esquinas de 9999px y 32px de alto. Abajo: cada variante de botón que usa el sitio, sus estados hover y foco, y el CSS para que los tuyos se vean igual.

Medido en gitnimble.com hace 4 días.

Abrir el paquete de diseño completoDescargar el paquete

Botón secondary

Saber más
Hover
background color(display-p3 0 0.357 1) → #0049cc, shadow added (color(srgb -0.166327 0.364166 1.03865 / 0.24) 0px 16px 40px )
Transición
background, border-color, color, transform, box-shadow, 0.15s, 0.15s, 0.15s, 0.15s, 0.2s

Botón ghost

Download
Hover
sin cambio visible

El CSS

Una clase por variante, con los valores medidos. La fuente es la que gitnimble.com usa en sus botones.

buttons.css
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0px 0px;
  background: #f2f3f5;
  color: #8a8d94;
  border: none;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Inter", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0px 16px;
  background: transparent;
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 540;
  font-family: "Inter", sans-serif;
  cursor: pointer;
}

Para agentes de IA

El paquete es texto plano, sin clave: descarga DESIGN.md o entrega el paquete completo a Claude Code, Cursor o Copilot con el servidor MCP.

curl -s https://stylepack.ai/packs/gitnimble.com/DESIGN.md

Preguntas

¿Cómo hago botones como los de gitnimble.com?

Usa el CSS de esta página: el botón principal es #f2f3f5 con texto #8a8d94, esquinas de 9999px y 32px de alto. Añade las reglas de hover y foco que aparecen bajo cada variante y pon en el botón la fuente que usa gitnimble.com.

¿De qué color son los botones de gitnimble.com?

El botón principal de gitnimble.com es #f2f3f5 con texto #8a8d94. El sitio usa 2 variantes de botón en total; cada una está en esta página con su fondo, borde, radio y tamaño.

¿Puede un agente de programación con IA copiar los botones de gitnimble.com?

Sí. El paquete de diseño de gitnimble.com de Stylepack contiene cada variante de botón con sus estados, las fuentes, los colores y las capturas, así que Claude Code, Cursor o Copilot pueden construir botones que coincidan.