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

Usa el CSS de esta página: el botón principal es #08872b con texto #ffffff, esquinas de 6px y 48px 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 github.com.

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

El botón principal de github.com es #08872b con texto #ffffff. El sitio usa 3 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 github.com?

Sí. El paquete de diseño de github.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.

CSS de los botones de github.com: haz botones iguales

Botón primary

Hover: background transparent → #ffffff29, border #262c28 → #ffffff1f
Foco: outline 2px solid rgb(48, 148, 255)
Transición: background-color, border-color, 0.2s, 0.2s

Botón secondary

Search/

Hover: background transparent → #ffffff29, border #262c28 → #ffffff1f
Transición: background-color, border-color, 0.2s, 0.2s

Botón ghost

Iniciar sesión

Hover: sin cambio visible

El CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 48px;
6  padding: 6px 20px;
7  background: #08872b;
8  color: #ffffff;
9  border: 1px solid transparent;
10  border-radius: 6px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "Mona Sans", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 32px;
22  padding: 1px 12px;
23  background: transparent;
24  color: #ffffff;
25  border: 1px solid #262c28;
26  border-radius: 6px;
27  font-size: 16px;
28  font-weight: 400;
29  font-family: "Mona Sans", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 42px;
38  padding: 5px 5px;
39  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
40  color: #000000;
41  border: none;
42  border-radius: 0px;
43  font-size: 14px;
44  font-weight: 600;
45  font-family: "Mona Sans", sans-serif;
46  cursor: pointer;
47}

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/github.com/DESIGN.md

Los botones de github.com