Comment faire des boutons comme monzo.com ?

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

De quelle couleur sont les boutons de monzo.com ?

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

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

Bouton primary

Survol: background #091723 → #2c3a43, border #091723 → #2c3a43
Focus: outline 1px solid rgb(33, 143, 183), offset 2px
Transition: background-color, color, 0.3s, 0.3s

Bouton secondary

Open a free Monzo accoun

Survol: background #ffffff → #ffffffcc, border #ffffff → #ffffffcc
Transition: background-color, 0.2s

Bouton ghost

Confirm Selected Country

Survol: aucun changement visible

Le CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 51px;
6  padding: 12px 24px;
7  background: #091723;
8  color: #ffffff;
9  border: 1px solid #091723;
10  border-radius: 500px;
11  font-size: 16px;
12  font-weight: 600;
13  font-family: "MonzoSansText", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 48px;
22  padding: 12px 24px;
23  background: #ffffff;
24  color: #091723;
25  border: 1px solid #ffffff;
26  border-radius: 500px;
27  font-size: 16px;
28  font-weight: 600;
29  font-family: "MonzoSansText", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 42px;
38  padding: 0px 0px;
39  background: transparent;
40  color: #000000;
41  border: none;
42  border-radius: 0px;
43  font-size: 0px;
44  font-weight: 400;
45  font-family: "MonzoSansText", 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/monzo.com/DESIGN.md

Les boutons de monzo.com