Comment faire des boutons comme airbnb.com ?

Utilisez le CSS de cette page : le bouton principal est #ffffff4d avec du texte #000000, des coins de 100px, 35px de haut. Ajoutez les règles de survol et de focus listées sous chaque variante et donnez au bouton la police que airbnb.com utilise.

De quelle couleur sont les boutons de airbnb.com ?

Le bouton principal de airbnb.com est #ffffff4d avec du texte #000000. Le site utilise 2 variantes de bouton au total ; chacune est listée sur cette page avec son fond, sa bordure, son arrondi et sa taille.

Un agent de code IA peut-il copier les boutons de airbnb.com ?

Oui. Le pack de design de airbnb.com sur Stylepack contient chaque variante de bouton avec ses états, les polices, les couleurs et les captures, pour que Claude Code, Cursor ou Copilot puissent créer des boutons identiques.

CSS des boutons airbnb.com : des boutons comme les leurs

Bouton secondary

OnOff

Survol: aucun changement visible
Transition: ,

Bouton ghost

Become a host

Survol: aucun changement visible

Le CSS

Une classe par variante, avec les valeurs mesurées. La police est celle que airbnb.com applique à ses boutons.

buttons.css

1.btn-secondary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 35px;
6  padding: 0px 16px;
7  background: #ffffff4d;
8  color: #000000;
9  border: none;
10  border-radius: 100px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "Airbnb Cereal VF", sans-serif;
14  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;
15  cursor: pointer;
16}
17
18.btn-ghost {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 40px;
23  padding: 11px 12px;
24  background: transparent;
25  color: #222222;
26  border: none;
27  border-radius: 20px;
28  font-size: 14px;
29  font-weight: 500;
30  font-family: "Airbnb Cereal VF", sans-serif;
31  cursor: pointer;
32}

Pour les agents IA

Le pack est du texte brut, sans clé : récupérez DESIGN.md, ou confiez tout le pack à Claude Code, Cursor ou Copilot via le serveur MCP.

curl -s https://stylepack.ai/packs/airbnb.com/DESIGN.md

Les boutons de airbnb.com