Comment faire des boutons comme linear.app ?

Utilisez le CSS de cette page : le bouton principal est #e5e5e6 avec du texte #08090a, des coins de 9999px, 32px de haut. Ajoutez les règles de survol et de focus listées sous chaque variante et donnez au bouton la police que linear.app utilise.

De quelle couleur sont les boutons de linear.app ?

Le bouton principal de linear.app est #e5e5e6 avec du texte #08090a. 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 linear.app ?

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

Bouton primary

Survol: aucun changement visible
Focus: outline 1px solid rgb(94, 105, 209), offset 2px
Transition: border, background-color, color, box-shadow, opacity, filter, transform, 0.16s

Bouton secondary

Performance

Survol: aucun changement visible
Transition: all, 0s

Bouton ghost

Product

Survol: aucun changement visible

Le CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 32px;
6  padding: 0px 12px;
7  background: #e5e5e6;
8  color: #08090a;
9  border: 1px solid #e5e5e6;
10  border-radius: 9999px;
11  font-size: 13px;
12  font-weight: 510;
13  font-family: "Inter Variable", sans-serif;
14  box-shadow: rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;
15  cursor: pointer;
16}
17
18.btn-secondary {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 24px;
23  padding: 0px 11px;
24  background: transparent;
25  color: #d0d6e0;
26  border: 1px solid #2e2e32;
27  border-radius: 16px;
28  font-size: 12px;
29  font-weight: 400;
30  font-family: "Inter Variable", sans-serif;
31  cursor: pointer;
32}
33
34.btn-ghost {
35  display: inline-flex;
36  align-items: center;
37  justify-content: center;
38  height: 32px;
39  padding: 0px 12px;
40  background: transparent;
41  color: #8a8f98;
42  border: none;
43  border-radius: 9999px;
44  font-size: 13px;
45  font-weight: 400;
46  font-family: "Inter Variable", 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/linear.app/DESIGN.md

Les boutons de linear.app