Comment faire des boutons comme dropbox.com ?

Utilisez le CSS de cette page : le bouton principal est #0061fe avec du texte #f7f5f2, 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 dropbox.com utilise.

De quelle couleur sont les boutons de dropbox.com ?

Le bouton principal de dropbox.com est #0061fe avec du texte #f7f5f2. 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 dropbox.com ?

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

Bouton primary

Get started

Survol: background #0061fe → #0057e5
Focus: box-shadow ring rgb(66, 139, 255) 0px 0px 0px 3px
Transition: background-color, border-color, 0.1s, 0.1s

Bouton secondary

Try Dropbox free

Survol: background #0061fe → #0057e5
Transition: background-color, border-color, 0.1s, 0.1s

Bouton ghost

Products

Survol: aucun changement visible

Le CSS

Une classe par variante, avec les valeurs mesurées. La police est celle que dropbox.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 12px;
7  background: #0061fe;
8  color: #f7f5f2;
9  border: 2px solid #0061fe;
10  border-radius: 12px;
11  font-size: 16px;
12  font-weight: 400;
13  font-family: "Atlas Grotesk Web", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 55px;
22  padding: 16px 24px;
23  background: transparent;
24  color: #1e1919;
25  border: 2px solid #1e1919;
26  border-radius: 16px;
27  font-size: 16px;
28  font-weight: 400;
29  font-family: "Atlas Grotesk Web", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 72px;
38  padding: 16px 12px;
39  background: transparent;
40  color: #1e1919;
41  border: none;
42  border-radius: 0px;
43  font-size: 13.3333px;
44  font-weight: 400;
45  font-family: "Atlas Grotesk Web", 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/dropbox.com/DESIGN.md

Les boutons de dropbox.com