Stylepack

Buttons

The buttons on causal.so

The primary button on causal.so is #1a1a1a with #f9f9f9 text, 100px corners and 36px tall. Below: every button variant the site uses, its hover and focus states, and the CSS to make yours look the same.

Measured from causal.so 4 days ago.

Open the full design packDownload the pack

primary button

Start for free
Hover
no visible change
Focus
outline 2px solid rgb(26, 26, 26), offset 2px
Transition
color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, 0.3s

ghost button

Solutions
Hover
no visible change

The CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0px 14px;
  background: #1a1a1a;
  color: #f9f9f9;
  border: none;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Manrope Variable", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0px 0px;
  background: transparent;
  color: #878787;
  border: none;
  border-radius: 0px;
  font-size: 14px;
  font-weight: 500;
  font-family: "Manrope Variable", 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/causal.so/DESIGN.md

Questions

How do I make buttons like causal.so?

Use the CSS on this page: the primary button is #1a1a1a with #f9f9f9 text, 100px corners, 36px tall. Add the hover and focus rules listed under each variant and set the button font to the one causal.so uses.

What color are the causal.so buttons?

The primary button on causal.so is #1a1a1a with #f9f9f9 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 causal.so buttons?

Yes. The causal.so 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.