Comment faire des boutons comme github.com ?

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

De quelle couleur sont les boutons de github.com ?

Le bouton principal de github.com est #08872b 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 github.com ?

Oui. Le pack de design de github.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 github.com : des boutons comme les leurs

Bouton primary

Survol: background transparent → #ffffff29, border #262c28 → #ffffff1f
Focus: outline 2px solid rgb(48, 148, 255)
Transition: background-color, border-color, 0.2s, 0.2s

Bouton secondary

Search/

Survol: background transparent → #ffffff29, border #262c28 → #ffffff1f
Transition: background-color, border-color, 0.2s, 0.2s

Bouton ghost

Se connecter

Survol: aucun changement visible

Le CSS

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

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}

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

Les boutons de github.com