Tools
Get the button CSS of any website
Enter a website address and get the CSS of its buttons: every variant with its background, text color, border, radius and size, plus hover and focus.
linear.app
Measured 4 days ago.
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0px 12px;
background: #e5e5e6;
color: #08090a;
border: 1px solid #e5e5e6;
border-radius: 9999px;
font-size: 13px;
font-weight: 510;
font-family: "Inter Variable", sans-serif;
box-shadow: rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;
cursor: pointer;
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 24px;
padding: 0px 11px;
background: transparent;
color: #d0d6e0;
border: 1px solid #2e2e32;
border-radius: 16px;
font-size: 12px;
font-weight: 400;
font-family: "Inter Variable", sans-serif;
cursor: pointer;
}
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0px 12px;
background: transparent;
color: #8a8f98;
border: none;
border-radius: 9999px;
font-size: 13px;
font-weight: 400;
font-family: "Inter Variable", sans-serif;
cursor: pointer;
}How it works
Stylepack opens the site in a real browser, measures what renders (not what the stylesheet says) at four widths and in both themes, and stores the result as a design pack. A site already measured answers at once; a new one takes under a minute. Every value on this page comes from that pack.
Questions
Which buttons are measured?
The primary, secondary and ghost variants found on the page, each measured at rest, on hover and on focus. The CSS has one class per variant with the measured values.
Why does my button still look different?
Buttons depend on their font: set the button font to the one the site uses (named in the result) and load it, or its free stand-in, first. The design pack carries the font stack and the rest of the system.
Can an AI coding agent use this?
Yes. Paste the CSS, or hand the agent the site's design pack: it holds every variant with its states, the colors, the type and screenshots to compare against.