How do I make buttons like airbnb.com?

Use the CSS on this page: the primary button is #ffffff4d with #000000 text, 100px corners, 35px tall. Add the hover and focus rules listed under each variant and set the button font to the one airbnb.com uses.

What color are the airbnb.com buttons?

The primary button on airbnb.com is #ffffff4d with #000000 text. The site uses 2 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 airbnb.com buttons?

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

airbnb.com button CSS: make buttons like theirs

secondary button

OnOff

Hover: no visible change
Transition: ,

ghost button

Become a host

Hover: no visible change

The CSS

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

buttons.css

1.btn-secondary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 35px;
6  padding: 0px 16px;
7  background: #ffffff4d;
8  color: #000000;
9  border: none;
10  border-radius: 100px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "Airbnb Cereal VF", sans-serif;
14  box-shadow: rgba(218, 218, 218, 0.6) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.12) 0px -0.502px 1.004px 0px, rgba(0, 0, 0, 0.04) 0px -1.5px 3.5px 0px, rgba(0, 0, 0, 0.05) 0px 3px 5px 0px, rgba(0, 0, 0, 0.2) 0px 0.75px 1px 0px inset, rgba(34, 34, 34, 0.6) 0px -0.5px 5px 1px inset, rgba(0, 0, 0, 0.16) 0.502px 0.5px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px -3px 7px 0px inset, rgba(0, 0, 0, 0.05) 0.502px 2px 4px 0px inset, rgba(0, 0, 0, 0.04) 1.004px 4px 4px 0px inset, rgba(184, 72, 155, 0.2) 0px -3px 7px 0px inset;
15  cursor: pointer;
16}
17
18.btn-ghost {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 40px;
23  padding: 11px 12px;
24  background: transparent;
25  color: #222222;
26  border: none;
27  border-radius: 20px;
28  font-size: 14px;
29  font-weight: 500;
30  font-family: "Airbnb Cereal VF", sans-serif;
31  cursor: pointer;
32}

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

The buttons on airbnb.com