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.
linear.app
Mesuré il y a 4 jours.
.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;
}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.