How do I make buttons like canva.com?

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

What color are the canva.com buttons?

The primary button on canva.com is #8b3dff 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 canva.com buttons?

Yes. The canva.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.

canva.com button CSS: make buttons like theirs

primary button

Start designing for free

Hover: background #ffffffe5 → #ffffff
Focus: outline 1px auto rgb(238, 238, 238), offset 1px
Transition: background-color, box-shadow, color, transform, 0.1s, 0.1s, 0.1s, 0.07s

secondary button

Hover: background #ffffffe5 → #ffffff
Transition: background-color, box-shadow, color, transform, 0.1s, 0.1s, 0.1s, 0.07s

ghost button

Design

Hover: no visible change

The CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 40px;
6  padding: 0px 16px;
7  background: #8b3dff;
8  color: #ffffff;
9  border: none;
10  border-radius: 12px;
11  font-size: 14px;
12  font-weight: 600;
13  font-family: "Canva Sans", sans-serif;
14  box-shadow: rgba(255, 255, 255, 0.16) 0px 24px 24px -18px inset, rgba(255, 255, 255, 0.25) 0px 1px 0.5px 0px inset, rgba(21, 30, 130, 0.12) 0px -1px 0.5px 0px inset, rgba(21, 30, 130, 0.07) 0px 1px 2px 0px, rgba(21, 30, 130, 0.03) 0px 3px 4px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset;
15  cursor: pointer;
16}
17
18.btn-secondary {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 32px;
23  padding: 0px 12px;
24  background: #ffffffe5;
25  color: #0f1015;
26  border: none;
27  border-radius: 10px;
28  font-size: 14px;
29  font-weight: 600;
30  font-family: "Canva Sans", sans-serif;
31  box-shadow: rgba(255, 255, 255, 0.08) 0px 24px 24px -18px inset, rgba(255, 255, 255, 0.25) 0px 1px 0.5px 0px inset, rgba(0, 0, 0, 0.25) 0px -1px 0.5px 0px inset, rgba(0, 0, 0, 0.14) 0px 1px 2px 0px, rgba(0, 0, 0, 0.07) 0px 3px 4px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset;
32  cursor: pointer;
33}
34
35.btn-ghost {
36  display: inline-flex;
37  align-items: center;
38  justify-content: center;
39  height: 32px;
40  padding: 4px 8px;
41  background: transparent;
42  color: #ffffff;
43  border: none;
44  border-radius: 12px;
45  font-size: 13.3333px;
46  font-weight: 400;
47  font-family: "Canva Sans", 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/canva.com/DESIGN.md

The buttons on canva.com