Buttons
The buttons on situationnormal.co
The primary button on situationnormal.co is #a3a3a34d with #0000ee text, 9999px corners and 42px tall. Below: every button variant the site uses, its hover and focus states, and the CSS to make yours look the same.
Measured from situationnormal.co 4 days ago.
secondary button
- Hover
- background #a3a3a34d → #e3e3e3, transforms
- Transition
- all, 0s
The CSS
One class per variant, with the measured values. The font is the one situationnormal.co sets on its buttons.
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 42px;
padding: 10px 10px;
background: #a3a3a34d;
color: #0000ee;
border: none;
border-radius: 9999px;
font-size: 12px;
font-weight: 400;
font-family: "EB Garamond", 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/situationnormal.co/DESIGN.mdQuestions
How do I make buttons like situationnormal.co?
Use the CSS on this page: the primary button is #a3a3a34d with #0000ee text, 9999px corners, 42px tall. Add the hover and focus rules listed under each variant and set the button font to the one situationnormal.co uses.
What color are the situationnormal.co buttons?
The primary button on situationnormal.co is #a3a3a34d with #0000ee text. The site uses 1 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 situationnormal.co buttons?
Yes. The situationnormal.co 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.