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.
airbnb.com
vor 4 Tagen gemessen.
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 35px;
padding: 0px 16px;
background: #ffffff4d;
color: #000000;
border: none;
border-radius: 100px;
font-size: 14px;
font-weight: 400;
font-family: "Airbnb Cereal VF", sans-serif;
box-shadow: rgba(218, 218, 218, 0.6) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.12) 0px -0.502px 1.004px 0px, rgba(0, 0, 0, 0.04) 0px -1.5px 3.5px 0px, rgba(0, 0, 0, 0.05) 0px 3px 5px 0px, rgba(0, 0, 0, 0.2) 0px 0.75px 1px 0px inset, rgba(34, 34, 34, 0.6) 0px -0.5px 5px 1px inset, rgba(0, 0, 0, 0.16) 0.502px 0.5px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px -3px 7px 0px inset, rgba(0, 0, 0, 0.05) 0.502px 2px 4px 0px inset, rgba(0, 0, 0, 0.04) 1.004px 4px 4px 0px inset, rgba(184, 72, 155, 0.2) 0px -3px 7px 0px inset;
cursor: pointer;
}
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 11px 12px;
background: transparent;
color: #222222;
border: none;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
font-family: "Airbnb Cereal VF", 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.