How do I make buttons like relume.ai?

Use the CSS on this page: the primary button is #ff00f4 with #ffffff text, 6px corners, 32px tall. Add the hover and focus rules listed under each variant and set the button font to the one relume.ai uses.

What color are the relume.ai buttons?

The primary button on relume.ai is #ff00f4 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 relume.ai buttons?

Yes. The relume.ai 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.

relume.ai button CSS: make buttons like theirs

primary button

Generate Website

Hover: moves down 1px
Focus: outline 1px auto rgb(16, 16, 16)
Transition: opacity, color, border-color, background-color, transform, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s

secondary button

Learn more

Hover: no visible change
Transition: opacity, color, border-color, background-color, transform, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s

ghost button

Aura Trails

Hover: no visible change

The CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 32px;
6  padding: 6px 12px;
7  background: #ff00f4;
8  color: #ffffff;
9  border: none;
10  border-radius: 6px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "Geist Variable", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 88px;
22  padding: 0px 0px;
23  background: #ffffffeb;
24  color: #101010;
25  border: none;
26  border-radius: 9999px;
27  font-size: 14px;
28  font-weight: 400;
29  font-family: "Geist Variable", sans-serif;
30  box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 32px 0px;
31  cursor: pointer;
32}
33
34.btn-ghost {
35  display: inline-flex;
36  align-items: center;
37  justify-content: center;
38  height: 25px;
39  padding: 0px 8px;
40  background: transparent;
41  color: #161616;
42  border: none;
43  border-radius: 6px;
44  font-size: 14px;
45  font-weight: 400;
46  font-family: "Geist Variable", sans-serif;
47  cursor: pointer;
48}

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/relume.ai/DESIGN.md

The buttons on relume.ai