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

Usa el CSS de esta página: el botón principal es #000000 con texto #ffffff, esquinas de 40px y 36px 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 openai.com.

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

El botón principal de openai.com es #000000 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 openai.com?

Sí. El paquete de diseño de openai.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 openai.com: haz botones iguales

Botón primary

Try ChatGPT(opens in a n

Hover: sin cambio visible
Foco: outline 1px none rgba(0, 0, 0, 0.486), offset 2px
Transición: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events, 0.2s

Botón secondary

Learn about ChatGPT Busi

Hover: sin cambio visible
Transición: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events, 0.25s

Botón ghost

Products

Hover: sin cambio visible

El CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 36px;
6  padding: 0px 20px;
7  background: #000000;
8  color: #ffffff;
9  border: none;
10  border-radius: 40px;
11  font-size: 14px;
12  font-weight: 500;
13  font-family: "OpenAI 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: 40px;
22  padding: 0px 12px;
23  background: transparent;
24  color: #000000;
25  border: 1px solid #0000001f;
26  border-radius: 9999px;
27  font-size: 14px;
28  font-weight: 500;
29  font-family: "OpenAI Sans", sans-serif;
30  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 0px 2px 0px;
31  cursor: pointer;
32}
33
34.btn-ghost {
35  display: inline-flex;
36  align-items: center;
37  justify-content: center;
38  height: 64px;
39  padding: 0px 16px;
40  background: transparent;
41  color: #000000;
42  border: none;
43  border-radius: 0px;
44  font-size: 17px;
45  font-weight: 400;
46  font-family: "OpenAI Sans", sans-serif;
47  cursor: pointer;
48}

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

Los botones de openai.com