Comment faire des boutons comme notion.com ?

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

De quelle couleur sont les boutons de notion.com ?

Le bouton principal de notion.com est #0075de 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 notion.com ?

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

Bouton primary

Get Notion free

Survol: background #0075de → #005bab
Focus: outline 2px solid rgba(0, 117, 222, 0.925), offset 2px
Transition: all, 0s

Bouton secondary

Request a demo

Survol: background #0075de → #005bab
Transition: background-color, color, 0.2s

Bouton ghost

Product

Survol: aucun changement visible

Le CSS

Une classe par variante, avec les valeurs mesurées. La police est celle que notion.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: 4px 14px;
7  background: #0075de;
8  color: #ffffff;
9  border: 1px solid transparent;
10  border-radius: 8px;
11  font-size: 16px;
12  font-weight: 500;
13  font-family: "NotionInter", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 38px;
22  padding: 6px 15px;
23  background: #e6f3fe;
24  color: #005bab;
25  border: 1px solid transparent;
26  border-radius: 8px;
27  font-size: 16px;
28  font-weight: 500;
29  font-family: "NotionInter", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 30px;
38  padding: 5px 10px;
39  background: transparent;
40  color: #000000e5;
41  border: none;
42  border-radius: 4px;
43  font-size: 16px;
44  font-weight: 400;
45  font-family: "NotionInter", 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/notion.com/DESIGN.md

Les boutons de notion.com