Comment faire des boutons comme openai.com ?

Utilisez le CSS de cette page : le bouton principal est #000000 avec du texte #ffffff, des coins de 40px, 36px de haut. Ajoutez les règles de survol et de focus listées sous chaque variante et donnez au bouton la police que openai.com utilise.

De quelle couleur sont les boutons de openai.com ?

Le bouton principal de openai.com est #000000 avec du texte #ffffff. Le site utilise 3 variantes de bouton au total ; chacune est listée sur cette page avec son fond, sa bordure, son arrondi et sa taille.

Un agent de code IA peut-il copier les boutons de openai.com ?

Oui. Le pack de design de openai.com sur Stylepack contient chaque variante de bouton avec ses états, les polices, les couleurs et les captures, pour que Claude Code, Cursor ou Copilot puissent créer des boutons identiques.

CSS des boutons openai.com : des boutons comme les leurs

Bouton primary

Try ChatGPT(opens in a n

Survol: aucun changement visible
Focus: outline 1px none rgba(0, 0, 0, 0.486), offset 2px
Transition: 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

Bouton secondary

Learn about ChatGPT Busi

Survol: aucun changement visible
Transition: 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

Bouton ghost

Products

Survol: aucun changement visible

Le CSS

Une classe par variante, avec les valeurs mesurées. La police est celle que openai.com applique à ses boutons.

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}

Pour les agents IA

Le pack est du texte brut, sans clé : récupérez DESIGN.md, ou confiez tout le pack à Claude Code, Cursor ou Copilot via le serveur MCP.

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

Les boutons de openai.com