How do I make buttons like resend.com?

Use the CSS on this page: the primary button is #00a3ff with #ffffff text, 4px corners, 41px tall. Add the hover and focus rules listed under each variant and set the button font to the one resend.com uses.

What color are the resend.com buttons?

The primary button on resend.com is #00a3ff 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 resend.com buttons?

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

resend.com button CSS: make buttons like theirs

primary button

Get Started

Hover: no visible change

secondary button

Hover: no visible change
Transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events, 0.2s

ghost button

Features

Hover: no visible change

The CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 41px;
6  padding: 12px 20px;
7  background: #00a3ff;
8  color: #ffffff;
9  border: none;
10  border-radius: 4px;
11  font-size: 14px;
12  font-weight: 600;
13  font-family: "inter", 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: 0px 16px;
23  background: transparent;
24  color: #a1a4a5;
25  border: 1px solid transparent;
26  border-radius: 16px;
27  font-size: 14px;
28  font-weight: 600;
29  font-family: "inter", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 58px;
38  padding: 4px 12px;
39  background: transparent;
40  color: #a1a4a5;
41  border: none;
42  border-radius: 0px;
43  font-size: 14px;
44  font-weight: 500;
45  font-family: "inter", 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/resend.com/DESIGN.md

The buttons on resend.com