Tools

Das Button-CSS jeder Website

Gib eine Website-Adresse ein und erhalte das CSS ihrer Buttons: jede Variante mit Hintergrund, Textfarbe, Rahmen, Radius und Größe, dazu hover und focus.

Probierstripe.comlinear.appairbnb.com

linear.app

vor 4 Tagen gemessen.

Sign upPerformanceProduct
buttons.css
.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;
}

So funktioniert es

Stylepack öffnet die Website in einem echten Browser, misst, was gerendert wird (nicht, was im Stylesheet steht), in vier Breiten und in beiden Themes, und speichert das Ergebnis als Designpaket. Eine bereits gemessene Website antwortet sofort; eine neue braucht unter einer Minute. Jeder Wert auf dieser Seite stammt aus diesem Paket.

Fragen

Welche Buttons werden gemessen?

Die Varianten primary, secondary und ghost, die auf der Seite gefunden werden, jede gemessen im Ruhezustand, bei hover und bei focus. Das CSS hat eine Klasse pro Variante mit den gemessenen Werten.

Warum sieht mein Button trotzdem anders aus?

Buttons hängen von ihrer Schrift ab: Setze als Button-Schrift die, die die Website nutzt (im Ergebnis genannt), und lade zuerst sie oder ihre freie Alternative. Das Designpaket enthält den Font-Stack und den Rest des Systems.

Kann ein KI-Coding-Agent das nutzen?

Ja. Füge das CSS ein oder gib dem Agenten das Designpaket der Website: Es enthält jede Variante mit ihren Zuständen, die Farben, die Typografie und Screenshots zum Vergleichen.