Comment faire des boutons comme voiceflow.com ?

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

De quelle couleur sont les boutons de voiceflow.com ?

Le bouton principal de voiceflow.com est #397dff 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 voiceflow.com ?

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

Bouton primary

Get started

Survol: background #397dff → #2f68db, shadow deepens
Focus: outline 1px none rgb(255, 255, 255), offset 1px
Transition: all, 0.2s

Bouton secondary

Survol: background #397dff → #2f68db, shadow deepens
Transition: background-color, color, opacity, box-shadow, border-color, 0.15s, 0.15s, 0.15s, 0.15s, 0.15s

Bouton ghost

Resources

Survol: aucun changement visible

Le CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 37px;
6  padding: 10px 14px;
7  background: #397dff;
8  color: #ffffff;
9  border: none;
10  border-radius: 8px;
11  font-size: 14px;
12  font-weight: 600;
13  font-family: "UCity Pro", sans-serif;
14  box-shadow: rgba(15, 30, 97, 0.08) 0px 6px 16px -8px, rgba(15, 30, 97, 0.06) 0px 4px 12px -6px, rgba(15, 30, 97, 0.06) 0px 3px 8px -4px, rgba(15, 30, 97, 0.04) 0px 2px 6px -3px, rgba(15, 30, 97, 0.04) 0px 1px 4px -2px, rgba(15, 30, 97, 0.02) 0px 1px 3px -1px, rgba(15, 30, 97, 0.01) 0px 1px 2px 0px, rgba(47, 104, 219, 0.32) 0px -1px 0px 1px inset, rgba(255, 255, 255, 0.32) 0px 1px 2px -1px inset;
15  cursor: pointer;
16}
17
18.btn-secondary {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 40px;
23  padding: 0px 0px;
24  background: #ffffff;
25  color: #1a1e23;
26  border: none;
27  border-radius: 9999px;
28  font-size: 16px;
29  font-weight: 400;
30  font-family: "UCity Pro", sans-serif;
31  box-shadow: rgba(22, 26, 30, 0.01) 0px 1px 3px 1px, rgba(22, 26, 30, 0.08) 0px 4px 8px -6px, rgba(22, 26, 30, 0.08) 0px 1px 5px -4px, rgba(22, 26, 30, 0.04) 0px 0px 0px 1px, rgba(22, 26, 30, 0.02) 0px 1px 0px 0px;
32  cursor: pointer;
33}
34
35.btn-ghost {
36  display: inline-flex;
37  align-items: center;
38  justify-content: center;
39  height: 33px;
40  padding: 4px 12px;
41  background: transparent;
42  color: #515a63;
43  border: none;
44  border-radius: 0px;
45  font-size: 14px;
46  font-weight: 400;
47  font-family: "UCity Pro", sans-serif;
48  cursor: pointer;
49}

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

Les boutons de voiceflow.com