Stylepack

Düğmeler

airbnb.com sitesindeki düğmeler

airbnb.com sitesinin birincil düğmesi #ffffff4d zemin, #000000 metin, 100px köşe ve 35px yükseklikte. Aşağıda: sitenin kullandığı her düğme varyantı, hover ve focus durumları ve sizinkini aynı görünüme kavuşturacak CSS.

airbnb.com sitesinden 4 gün önce ölçüldü.

Tam tasarım paketini açPaketi indir

secondary düğmesi

OnOff
Hover
görünür değişiklik yok
Geçiş
,

ghost düğmesi

Become a host
Hover
görünür değişiklik yok

CSS

Her varyant için bir sınıf, ölçülen değerlerle. Font, airbnb.com sitesinin düğmelerinde kullandığı font.

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

Yapay zeka ajanları için

Paket düz metindir, anahtar gerekmez: DESIGN.md dosyasını alın ya da tüm paketi MCP sunucusuyla Claude Code, Cursor veya Copilot'a verin.

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

Sorular

airbnb.com gibi düğmeleri nasıl yaparım?

Bu sayfadaki CSS’i kullanın: birincil düğme #ffffff4d zemin, #000000 metin, 100px köşe, 35px yükseklikte. Her varyantın altında listelenen hover ve focus kurallarını ekleyin ve düğme fontunu airbnb.com sitesinin kullandığı fonta ayarlayın.

airbnb.com düğmeleri hangi renk?

airbnb.com sitesinin birincil düğmesi #ffffff4d zemin üzerinde #000000 metin. Site toplam 2 düğme varyantı kullanıyor; her biri zemini, kenarlığı, köşe yarıçapı ve boyutuyla bu sayfada listelenmiş.

Bir yapay zeka kodlama ajanı airbnb.com düğmelerini kopyalayabilir mi?

Evet. Stylepack’teki airbnb.com tasarım paketi her düğme varyantını durumlarıyla, fontlarıyla, renkleriyle ve ekran görüntüleriyle içerir; böylece Claude Code, Cursor ya da Copilot aynı görünümde düğmeler kurabilir.