Stylepack

Buttons

The buttons on how.studio

The primary button on how.studio is #ecffb4 with #333333 text, 6px corners and 40px tall. Below: every button variant the site uses, its hover and focus states, and the CSS to make yours look the same.

Measured from how.studio 4 days ago.

Open the full design packDownload the pack

secondary button

Start a project
Hover
no visible change

ghost button

Services
Hover
no visible change

The CSS

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

buttons.css
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 13px 16px;
  background: #ecffb4;
  color: #333333;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 360;
  font-family: "Azeret Mono", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 16px;
  background: transparent;
  color: #333333;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 360;
  font-family: "Azeret Mono", 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/how.studio/DESIGN.md

Questions

How do I make buttons like how.studio?

Use the CSS on this page: the primary button is #ecffb4 with #333333 text, 6px corners, 40px tall. Add the hover and focus rules listed under each variant and set the button font to the one how.studio uses.

What color are the how.studio buttons?

The primary button on how.studio is #ecffb4 with #333333 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 how.studio buttons?

Yes. The how.studio 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.