How do I make buttons like voiceflow.com?

Use the CSS on this page: the primary button is #397dff with #ffffff text, 8px corners, 37px tall. Add the hover and focus rules listed under each variant and set the button font to the one voiceflow.com uses.

What color are the voiceflow.com buttons?

The primary button on voiceflow.com is #397dff with #ffffff text. The site uses 3 button variants in total; each one is listed on this page with its background, border, radius and size.

Can an AI coding agent copy the voiceflow.com buttons?

Yes. The voiceflow.com design pack from Stylepack holds every button variant with its states, the fonts, the colors and screenshots, so Claude Code, Cursor or Copilot can build buttons that match.

voiceflow.com button CSS: make buttons like theirs

primary button

Get started

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

secondary button

Learn more

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

ghost button

Resources

Hover: no visible change

The CSS

One class per variant, with the measured values. The font is the one voiceflow.com sets on its buttons.

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}

For AI agents

The pack is plain text, no key: fetch DESIGN.md, or hand the whole pack to Claude Code, Cursor or Copilot with the MCP server.

curl -s https://stylepack.ai/packs/voiceflow.com/DESIGN.md

The buttons on voiceflow.com