Como fazer botões iguais aos do openai.com?

Use o CSS desta página: o botão principal é #000000 com texto #ffffff, cantos de 40px, 36px de altura. Adicione as regras de hover e foco listadas em cada variante e defina a fonte do botão como a que o openai.com usa.

De que cor são os botões do openai.com?

O botão principal do openai.com é #000000 com texto #ffffff. O site usa 3 variantes de botão no total; cada uma está listada nesta página com fundo, borda, raio e tamanho.

Um agente de código com IA consegue copiar os botões do openai.com?

Sim. O pacote de design do openai.com no Stylepack traz cada variante de botão com seus estados, as fontes, as cores e capturas de tela, para que Claude Code, Cursor ou Copilot construam botões iguais.

CSS dos botões do openai.com: faça botões iguais

Botão primary

Try ChatGPT(opens in a n

Hover: sem mudança visível
Foco: outline 1px none rgba(0, 0, 0, 0.486), offset 2px
Transição: 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ão secondary

Learn about ChatGPT Busi

Hover: sem mudança visível
Transição: 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ão ghost

Products

Hover: sem mudança visível

O CSS

Uma classe por variante, com os valores medidos. A fonte é a que o openai.com define nos botões.

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

O pacote é texto puro, sem chave: busque o DESIGN.md ou entregue o pacote inteiro ao Claude Code, Cursor ou Copilot pelo servidor MCP.

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

Os botões do openai.com