How do I make buttons like dropbox.com?

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

What color are the dropbox.com buttons?

The primary button on dropbox.com is #0061fe with #f7f5f2 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 dropbox.com buttons?

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

dropbox.com button CSS: make buttons like theirs

primary button

Get started

Hover: background #0061fe → #0057e5
Focus: box-shadow ring rgb(66, 139, 255) 0px 0px 0px 3px
Transition: background-color, border-color, 0.1s, 0.1s

secondary button

Try Dropbox free

Hover: background #0061fe → #0057e5
Transition: background-color, border-color, 0.1s, 0.1s

ghost button

Products

Hover: no visible change

The CSS

One class per variant, with the measured values. The font is the one dropbox.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 12px;
7  background: #0061fe;
8  color: #f7f5f2;
9  border: 2px solid #0061fe;
10  border-radius: 12px;
11  font-size: 16px;
12  font-weight: 400;
13  font-family: "Atlas Grotesk Web", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 55px;
22  padding: 16px 24px;
23  background: transparent;
24  color: #1e1919;
25  border: 2px solid #1e1919;
26  border-radius: 16px;
27  font-size: 16px;
28  font-weight: 400;
29  font-family: "Atlas Grotesk Web", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 72px;
38  padding: 16px 12px;
39  background: transparent;
40  color: #1e1919;
41  border: none;
42  border-radius: 0px;
43  font-size: 13.3333px;
44  font-weight: 400;
45  font-family: "Atlas Grotesk Web", sans-serif;
46  cursor: pointer;
47}

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

The buttons on dropbox.com