Stylepack

الأزرار

أزرار airbnb.com

الزر الأساسي في airbnb.com لونه #ffffff4d بنص #000000، وزواياه 100px، وارتفاعه 35px. أدناه: كل أنواع الأزرار التي يستخدمها الموقع، وحالات hover والتركيز فيها، وكود CSS لتبدو أزرارك مثلها.

تم القياس من airbnb.com قبل 4 أيام.

افتح حزمة التصميم الكاملةتنزيل الحزمة

زر secondary

OnOff
Hover
لا تغيير مرئي
الانتقال
,

زر ghost

Become a host
Hover
لا تغيير مرئي

كود CSS

فئة واحدة لكل نوع، بالقيم المقاسة. الخط هو الذي يستخدمه airbnb.com في أزراره.

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;
}

لوكلاء الذكاء الاصطناعي

الحزمة نص عادي بلا مفتاح: اجلب DESIGN.md، أو سلّم الحزمة كاملة إلى Claude Code أو Cursor أو Copilot عبر خادم MCP.

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

أسئلة

كيف أصنع أزرارًا مثل airbnb.com؟

استخدم كود CSS في هذه الصفحة: الزر الأساسي لونه #ffffff4d بنص #000000، وزواياه 100px، وارتفاعه 35px. أضف قواعد hover والتركيز المذكورة تحت كل نوع، واضبط خط الزر على الخط الذي يستخدمه airbnb.com.

ما لون أزرار airbnb.com؟

الزر الأساسي في airbnb.com لونه #ffffff4d بنص #000000. يستخدم الموقع 2 أنواع من الأزرار في المجموع؛ كل نوع مذكور في هذه الصفحة بخلفيته وحدوده واستدارته وحجمه.

هل يستطيع وكيل برمجة بالذكاء الاصطناعي نسخ أزرار airbnb.com؟

نعم. تحتوي حزمة تصميم airbnb.com من Stylepack على كل أنواع الأزرار بحالاتها والخطوط والألوان ولقطات الشاشة، فيستطيع Claude Code أو Cursor أو Copilot بناء أزرار مطابقة.