الأزرار
أزرار relume.ai
الزر الأساسي في relume.ai لونه #ff00f4 بنص #ffffff، وزواياه 6px، وارتفاعه 32px. أدناه: كل أنواع الأزرار التي يستخدمها الموقع، وحالات hover والتركيز فيها، وكود CSS لتبدو أزرارك مثلها.
تم القياس من relume.ai قبل 4 أيام.
زر primary
- Hover
- moves down 1px
- التركيز
- outline 1px auto rgb(16, 16, 16)
- الانتقال
- opacity, color, border-color, background-color, transform, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s
زر secondary
- Hover
- لا تغيير مرئي
- الانتقال
- opacity, color, border-color, background-color, transform, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s
زر ghost
- Hover
- لا تغيير مرئي
كود CSS
فئة واحدة لكل نوع، بالقيم المقاسة. الخط هو الذي يستخدمه relume.ai في أزراره.
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 6px 12px;
background: #ff00f4;
color: #ffffff;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 400;
font-family: "Geist Variable", sans-serif;
cursor: pointer;
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 88px;
padding: 0px 0px;
background: #ffffffeb;
color: #101010;
border: none;
border-radius: 9999px;
font-size: 14px;
font-weight: 400;
font-family: "Geist Variable", sans-serif;
box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 32px 0px;
cursor: pointer;
}
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
height: 25px;
padding: 0px 8px;
background: transparent;
color: #161616;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 400;
font-family: "Geist Variable", sans-serif;
cursor: pointer;
}لوكلاء الذكاء الاصطناعي
الحزمة نص عادي بلا مفتاح: اجلب DESIGN.md، أو سلّم الحزمة كاملة إلى Claude Code أو Cursor أو Copilot عبر خادم MCP.
curl -s https://stylepack.ai/packs/relume.ai/DESIGN.mdأسئلة
كيف أصنع أزرارًا مثل relume.ai؟
استخدم كود CSS في هذه الصفحة: الزر الأساسي لونه #ff00f4 بنص #ffffff، وزواياه 6px، وارتفاعه 32px. أضف قواعد hover والتركيز المذكورة تحت كل نوع، واضبط خط الزر على الخط الذي يستخدمه relume.ai.
ما لون أزرار relume.ai؟
الزر الأساسي في relume.ai لونه #ff00f4 بنص #ffffff. يستخدم الموقع 3 أنواع من الأزرار في المجموع؛ كل نوع مذكور في هذه الصفحة بخلفيته وحدوده واستدارته وحجمه.
هل يستطيع وكيل برمجة بالذكاء الاصطناعي نسخ أزرار relume.ai؟
نعم. تحتوي حزمة تصميم relume.ai من Stylepack على كل أنواع الأزرار بحالاتها والخطوط والألوان ولقطات الشاشة، فيستطيع Claude Code أو Cursor أو Copilot بناء أزرار مطابقة.