Comment faire des boutons comme wise.com ?

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

De quelle couleur sont les boutons de wise.com ?

Le bouton principal de wise.com est #163300 avec du texte #9fe870. 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 wise.com ?

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

Bouton primary

Survol: background #163300 → #0d1f00, text #9fe870 → #bbef9a, border #9fe870 → #bbef9a, icon/inner colour → #bbef9a
Focus: outline 2px solid rgb(22, 51, 0), offset 2px
Transition: color, background-color, border-color, 0.35s

Bouton secondary

Send money

Survol: background #163300 → #0d1f00, border #163300 → #0d1f00
Transition: color, background-color, 0s, 0.15s

Bouton ghost

Personal

Survol: aucun changement visible

Le CSS

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

buttons.css

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

Les boutons de wise.com