Stylepack

الأزرار

أزرار dropbox.com

الزر الأساسي في dropbox.com لونه #0061fe بنص #f7f5f2، وزواياه 12px، وارتفاعه 40px. أدناه: كل أنواع الأزرار التي يستخدمها الموقع، وحالات hover والتركيز فيها، وكود CSS لتبدو أزرارك مثلها.

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

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

زر primary

Get started
Hover
background #0061fe → #0057e5
التركيز
box-shadow ring rgb(66, 139, 255) 0px 0px 0px 3px
الانتقال
background-color, border-color, 0.1s, 0.1s

زر secondary

Try Dropbox free
Hover
background #0061fe → #0057e5
الانتقال
background-color, border-color, 0.1s, 0.1s

زر ghost

Products
Hover
لا تغيير مرئي

كود CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 12px;
  background: #0061fe;
  color: #f7f5f2;
  border: 2px solid #0061fe;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Atlas Grotesk Web", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 16px 24px;
  background: transparent;
  color: #1e1919;
  border: 2px solid #1e1919;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Atlas Grotesk Web", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 16px 12px;
  background: transparent;
  color: #1e1919;
  border: none;
  border-radius: 0px;
  font-size: 13.3333px;
  font-weight: 400;
  font-family: "Atlas Grotesk Web", sans-serif;
  cursor: pointer;
}

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

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

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

أسئلة

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

استخدم كود CSS في هذه الصفحة: الزر الأساسي لونه #0061fe بنص #f7f5f2، وزواياه 12px، وارتفاعه 40px. أضف قواعد hover والتركيز المذكورة تحت كل نوع، واضبط خط الزر على الخط الذي يستخدمه dropbox.com.

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

الزر الأساسي في dropbox.com لونه #0061fe بنص #f7f5f2. يستخدم الموقع 3 أنواع من الأزرار في المجموع؛ كل نوع مذكور في هذه الصفحة بخلفيته وحدوده واستدارته وحجمه.

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

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