Comment faire des boutons comme canva.com ?

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

De quelle couleur sont les boutons de canva.com ?

Le bouton principal de canva.com est #8b3dff 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 canva.com ?

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

Bouton primary

Start designing for free

Survol: background #ffffffe5 → #ffffff
Focus: outline 1px auto rgb(238, 238, 238), offset 1px
Transition: background-color, box-shadow, color, transform, 0.1s, 0.1s, 0.1s, 0.07s

Bouton secondary

Survol: background #ffffffe5 → #ffffff
Transition: background-color, box-shadow, color, transform, 0.1s, 0.1s, 0.1s, 0.07s

Bouton ghost

Design

Survol: aucun changement visible

Le CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 40px;
6  padding: 0px 16px;
7  background: #8b3dff;
8  color: #ffffff;
9  border: none;
10  border-radius: 12px;
11  font-size: 14px;
12  font-weight: 600;
13  font-family: "Canva Sans", sans-serif;
14  box-shadow: rgba(255, 255, 255, 0.16) 0px 24px 24px -18px inset, rgba(255, 255, 255, 0.25) 0px 1px 0.5px 0px inset, rgba(21, 30, 130, 0.12) 0px -1px 0.5px 0px inset, rgba(21, 30, 130, 0.07) 0px 1px 2px 0px, rgba(21, 30, 130, 0.03) 0px 3px 4px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset;
15  cursor: pointer;
16}
17
18.btn-secondary {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 32px;
23  padding: 0px 12px;
24  background: #ffffffe5;
25  color: #0f1015;
26  border: none;
27  border-radius: 10px;
28  font-size: 14px;
29  font-weight: 600;
30  font-family: "Canva Sans", sans-serif;
31  box-shadow: rgba(255, 255, 255, 0.08) 0px 24px 24px -18px inset, rgba(255, 255, 255, 0.25) 0px 1px 0.5px 0px inset, rgba(0, 0, 0, 0.25) 0px -1px 0.5px 0px inset, rgba(0, 0, 0, 0.14) 0px 1px 2px 0px, rgba(0, 0, 0, 0.07) 0px 3px 4px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset;
32  cursor: pointer;
33}
34
35.btn-ghost {
36  display: inline-flex;
37  align-items: center;
38  justify-content: center;
39  height: 32px;
40  padding: 4px 8px;
41  background: transparent;
42  color: #ffffff;
43  border: none;
44  border-radius: 12px;
45  font-size: 13.3333px;
46  font-weight: 400;
47  font-family: "Canva Sans", sans-serif;
48  cursor: pointer;
49}

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

Les boutons de canva.com