Outils
Obtenez le CSS des boutons de n’importe quel site web
Entrez l’adresse d’un site web et obtenez le CSS de ses boutons : chaque variante avec son fond, sa couleur de texte, sa bordure, son arrondi et sa taille, plus hover et focus.
airbnb.com
Mesuré il y a 4 jours.
.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;
}Comment ça marche
Stylepack ouvre le site dans un vrai navigateur, mesure ce qui s’affiche (et non ce que dit la feuille de style) à quatre largeurs et dans les deux thèmes, puis enregistre le résultat sous forme de pack de design. Un site déjà mesuré répond immédiatement ; un nouveau site prend moins d’une minute. Chaque valeur de cette page vient de ce pack.
Questions
Quels boutons sont mesurés ?
Les variantes primary, secondary et ghost trouvées sur la page, chacune mesurée au repos, au hover et au focus. Le CSS contient une classe par variante avec les valeurs mesurées.
Pourquoi mon bouton a-t-il encore un autre aspect ?
Les boutons dépendent de leur police : donnez au bouton la police que le site utilise (indiquée dans le résultat) et chargez-la, ou son substitut gratuit, d’abord. Le pack de design contient la pile de polices et le reste du système.
Un agent de code IA peut-il s’en servir ?
Oui. Collez le CSS, ou confiez à l’agent le pack de design du site : il contient chaque variante avec ses états, les couleurs, la typographie et des captures d’écran pour comparer.