Comment faire des boutons comme stripe.com ?

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

De quelle couleur sont les boutons de stripe.com ?

Le bouton principal de stripe.com est #533afd 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 stripe.com ?

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

Bouton primary

Contact sales

Survol: background #533afd → #4032c8
Focus: outline 3px solid rgba(84, 82, 251, 0.75), offset 1px
Transition: color, background-color, border-color, 0.24s, 0.24s, 0.24s

Bouton secondary

Survol: background transparent → #ffffff, text #533afd → #2e2b8c, border #ffffff → #4032c8, icon/inner colour → #2e2b8c
Transition: color, background-color, border-color, 0.24s, 0.24s, 0.24s

Bouton ghost

Products

Survol: aucun changement visible

Le CSS

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

Les boutons de stripe.com