Stylepack

Buttons

The buttons on arc.net

The primary button on arc.net is #ffffff1f with #ffffff text, 60px corners and 50px tall. Below: every button variant the site uses, its hover and focus states, and the CSS to make yours look the same.

Measured from arc.net 6 days ago.

Open the full design packDownload the pack

secondary button

Read more
Hover
no visible change

ghost button

When will I no longer be
Hover
no visible change

The CSS

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

buttons.css
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 14px 24px;
  background: #ffffff1f;
  color: #ffffff;
  border: none;
  border-radius: 60px;
  font-size: 16px;
  font-weight: 400;
  font-family: "ABC Oracle", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 74px;
  padding: 24px 0px;
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 0px;
  font-size: 22px;
  font-weight: 350;
  font-family: "ABC Oracle", sans-serif;
  cursor: pointer;
}

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/arc.net/DESIGN.md

Questions

How do I make buttons like arc.net?

Use the CSS on this page: the primary button is #ffffff1f with #ffffff text, 60px corners, 50px tall. Add the hover and focus rules listed under each variant and set the button font to the one arc.net uses.

What color are the arc.net buttons?

The primary button on arc.net is #ffffff1f with #ffffff 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 arc.net buttons?

Yes. The arc.net 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.