الأدوات
احصل على CSS أزرار أي موقع
أدخل عنوان موقع واحصل على CSS أزراره: كل نوع بخلفيته ولون نصه وحدوده واستدارته وحجمه، إضافة إلى حالتي hover وfocus.
airbnb.com
تم القياس قبل 4 أيام.
.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;
}كيف يعمل
يفتح Stylepack الموقع في متصفح حقيقي، ويقيس ما يُعرض فعلًا (لا ما يقوله ملف الأنماط) بأربعة عروض وفي كلا الوضعين، ويحفظ النتيجة كحزمة تصميم. الموقع المقاس سابقًا يجيب فورًا؛ والجديد يستغرق أقل من دقيقة. كل قيمة في هذه الصفحة تأتي من تلك الحزمة.
أسئلة
أي الأزرار تُقاس؟
الأنواع الأساسي والثانوي والشبحي (ghost) الموجودة في الصفحة، ويُقاس كل منها في حالة السكون وعند hover وعند focus. يحتوي CSS على صنف واحد لكل نوع بالقيم المقاسة.
لماذا ما زال زري يبدو مختلفًا؟
تعتمد الأزرار على خطها: اضبط خط الزر على الخط الذي يستخدمه الموقع (مذكور في النتيجة) وحمّله أولًا، أو حمّل بديله المجاني. تحمل حزمة التصميم سلسلة الخطوط وبقية النظام.
هل يستطيع وكيل برمجة بالذكاء الاصطناعي استخدام هذا؟
نعم. الصق CSS، أو سلّم الوكيل حزمة تصميم الموقع: تحتوي على كل نوع بحالاته، والألوان، والطباعة، ولقطات شاشة للمقارنة.