Comment faire des boutons comme sweetgreen.com ?

Utilisez le CSS de cette page : le bouton principal est #00473c avec du texte #e6ff55, des coins de 9999px, 30px de haut. Ajoutez les règles de survol et de focus listées sous chaque variante et donnez au bouton la police que sweetgreen.com utilise.

De quelle couleur sont les boutons de sweetgreen.com ?

Le bouton principal de sweetgreen.com est #00473c avec du texte #e6ff55. 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 sweetgreen.com ?

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

Bouton primary

Order

Survol: background #00473c → transparent, text #e6ff55 → #0e150e, border transparent → #0e150e
Focus: border → #0e150e50
Transition: all, 0.3s

Bouton secondary

Order now

Survol: background #e6ff55 → #00473c, text #00473c → #f4f3e7, border transparent → #00473c, icon/inner colour → #f4f3e7
Transition: all, 0.3s

Bouton ghost

Salads

Survol: aucun changement visible

Le CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 30px;
6  padding: 7px 16px;
7  background: #00473c;
8  color: #e6ff55;
9  border: 1px solid transparent;
10  border-radius: 9999px;
11  font-size: 16px;
12  font-weight: 400;
13  font-family: "Grenette", sans-serif;
14  text-transform: uppercase;
15  cursor: pointer;
16}
17
18.btn-secondary {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 46px;
23  padding: 15px 60px;
24  background: #e6ff55;
25  color: #00473c;
26  border: 1px solid transparent;
27  border-radius: 9999px;
28  font-size: 16px;
29  font-weight: 400;
30  font-family: "Grenette", sans-serif;
31  text-transform: uppercase;
32  cursor: pointer;
33}
34
35.btn-ghost {
36  display: inline-flex;
37  align-items: center;
38  justify-content: center;
39  height: 48px;
40  padding: 0px 0px;
41  background: transparent;
42  color: #0e150e;
43  border: none;
44  border-radius: 4px;
45  font-size: 48px;
46  font-weight: 200;
47  font-family: "Grenette", sans-serif;
48  text-transform: capitalize;
49  cursor: pointer;
50}

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

Les boutons de sweetgreen.com