الكلاس الافتراضي للازرار هو btn. تعمل فئة الأزرار في علامة HTML ، على سبيل المثال a, button, input, الخ...
الزر الافتراضي
الأبيض هو لون الزر الافتراضي.
<button class="btn">Button</button>مع استبدال
https://blog.itheric.com/ برابط الزرالذي تريد .
العلامات
يعمل الكلاس ايضا على مزيد من العلامات ايضا
<a href="#" class="btn">رابط</a> <button class="btn" type="submit">Button</button> <input class="btn" type="button" value="إدخال"/> <input class="btn" type="reset" value="ارجاع"/> <input class="btn-upload" type="file" id="file"/> <label for="file" class="btn" role="button">رفع</label>
الألوان
تحتوي المكتبة على عدة الوان
<button href="href="https://blog.itheric.com/" class="btn btn-dark">Button Dark</button> <button href="href="https://blog.itheric.com/" class="btn btn-light">مثال Light</button> <button href="href="https://blog.itheric.com/" class="btn btn-primary">مثال Primary</button> <button href="href="https://blog.itheric.com/" class="btn btn-secondary">مثال Secondary</button> <button href="href="https://blog.itheric.com/" class="btn btn-info">مثال Info</button> <button href="href="https://blog.itheric.com/" class="btn btn-warning">مثال Warning</button> <button href="href="https://blog.itheric.com/" class="btn btn-danger">مثال Danger</button> <button href="href="https://blog.itheric.com/" class="btn btn-success">مثال Success</button>
FAB (زر الإجراء العائم)
سوف يعمل FAB (زر الإجراء العائم) في حالة استخدام الفئة الافتراضية ودمجها مع btn-fab.
<button href="href="https://blog.itheric.com/" class="btn btn-fab"><i aria-hidden="true" class="mdi mdi-plus"></i></button> <button href="href="https://blog.itheric.com/" class="btn btn-fab btn-primary"><i aria-hidden="true" class="mdi mdi-plus"></i></button> <button href="href="https://blog.itheric.com/" class="btn btn-fab btn-secondary"><i aria-hidden="true" class="mdi mdi-plus"></i></button>
المقاسات
تتوفر أحجام الزر فقط صغير ومتوسط (افتراضي) وكبير..
<button href="href="https://blog.itheric.com/" class="btn btn-small btn-primary">مثال صغير</button> <button href="href="https://blog.itheric.com/" class="btn btn btn-primary">مثال افتراضي</button> <button href="href="https://blog.itheric.com/" class="btn btn-large btn-primary">مثال كبير</button> <button href="href="https://blog.itheric.com/" class="btn btn-fab btn-small btn-secondary"><i aria-hidden="true" class="mdi mdi-plus"></i></button> <button href="href="https://blog.itheric.com/" class="btn btn-fab btn-secondary"><i aria-hidden="true" class="mdi mdi-plus"></i></button> <button href="href="https://blog.itheric.com/" class="btn btn-fab btn-large btn-secondary"><i aria-hidden="true" class="mdi mdi-plus"></i></button>
لنمط المسطح
سيعمل الزر بنمط المسطح في حالة استخدام الكلاس الافتراضي ودمجه مع btn-flat.
<button href="href="https://blog.itheric.com/" class="btn btn-flat">مثال</button> <button href="href="https://blog.itheric.com/" class="btn btn-flat btn-primary">مثال Primary</button> <button href="href="https://blog.itheric.com/" class="btn btn-flat btn-secondary">مثال Secondary</button>
الظل
سيعمل الظل في حالة استخدام الكلاس الافتراضي ودمجه مع btn-raised.
<button href="href="https://blog.itheric.com/" class="btn btn-raised">Button</button><button href="href="https://blog.itheric.com/" class="btn btn-raised btn-primary">مثال Primary</button> <button href="href="https://blog.itheric.com/" class="btn btn-raised btn-secondary">مثال Secondary</button>
الإطار الخارجي
سيعمل نمط الاطار الخارجي في حالة استخدام الكلاس الافتراضي ودمجه مع btn-flat و btn-outline.
<button href="href="https://blog.itheric.com/" class="btn btn-flat btn-outline">Button</button> <button href="href="https://blog.itheric.com/" class="btn btn-flat btn-outline btn-primary">مثال Primary</button> <button href="href="https://blog.itheric.com/" class="btn btn-flat btn-outline btn-secondary">مثال Secondary</button> <button href="href="https://blog.itheric.com/" class="btn btn-flat btn-outline btn-info">مثال Info</button> <button href="href="https://blog.itheric.com/" class="btn btn-flat btn-outline btn-warning">مثال Warning</button> <button href="href="https://blog.itheric.com/" class="btn btn-flat btn-outline btn-danger">مثال Danger</button> <button href="href="https://blog.itheric.com/" class="btn btn-flat btn-outline btn-success">مثال Success</button>
النمط الدائري
سيعمل الزر الدائري في حالة استخدام الكلاس الافتراضي ودمجه مع btn-round.
<button href="href="https://blog.itheric.com/" class="btn btn-round btn-raised btn-secondary">مثال Round</button>
في الوسط
<div class="btn-center">
<button href="href="https://blog.itheric.com/" class="btn btn-raised btn-secondary">مثال في الوسط</button>
</div>
بالعرض الكامل
<button href="href="https://blog.itheric.com/" class="btn btn-block btn-raised btn-secondary">مثال بالعرض الكامل</button>
أيقونات
نحن نستخدم جيل محسن من خطوط الايقونات و هو خط Material Design Icons.
ايقونات يسار
<button href="href="https://blog.itheric.com/" class="btn btn-raised btn-success">مثال Download<i aria-hidden="true" class="icon-right mdi mdi-cloud-download"></i></button> <button href="href="https://blog.itheric.com/" class="btn btn-raised btn-warning">مثال Send<i aria-hidden="true" class="icon-right mdi mdi-send"></i></button> <button href="href="https://blog.itheric.com/" class="btn btn-raised btn-secondary">مثال Home<i aria-hidden="true" class="icon-right mdi mdi-home"></i></button> <button href="href="https://blog.itheric.com/" class="btn btn-raised btn-dark">مثال GitHub<i aria-hidden="true" class="icon-right mdi mdi-github-circle"></i></button> <button href="href="https://blog.itheric.com/" class="btn btn-raised btn-dark">مثال Codepen<i aria-hidden="true" class="icon-right mdi mdi-codepen"></i></button> <button href="href="https://blog.itheric.com/" class="btn btn-raised btn-dark">مثال Document<i aria-hidden="true" class="icon-right mdi mdi-file-document-box"></i></button> <button href="href="https://blog.itheric.com/" class="btn btn-raised btn-success btn-small">مثال Download<i aria-hidden="true" class="icon-right mdi mdi-cloud-download"></i></button> <button href="href="https://blog.itheric.com/" class="btn btn-raised btn-warning btn-large">مثال Send<i aria-hidden="true" class="icon-right mdi mdi-send"></i></button>
ايقونات يمين
<button href="href="https://blog.itheric.com/" class="btn btn-raised btn-success"><i aria-hidden="true" class="icon-left mdi mdi-cloud-download"></i>مثال Download</button> <button href="href="https://blog.itheric.com/" class="btn btn-raised btn-warning"><i aria-hidden="true" class="icon-left mdi mdi-send"></i>مثال Send</button> <button href="href="https://blog.itheric.com/" class="btn btn-raised btn-secondary"><i aria-hidden="true" class="icon-left mdi mdi-home"></i>مثال Home</button> <button href="href="https://blog.itheric.com/" class="btn btn-raised btn-dark"><i aria-hidden="true" class="icon-left mdi mdi-github-circle"></i>مثال GitHub</button> <button href="href="https://blog.itheric.com/" class="btn btn-raised btn-dark"><i aria-hidden="true" class="icon-left mdi mdi-codepen"></i>مثال Codepen</button> <button href="href="https://blog.itheric.com/" class="btn btn-raised btn-dark"><i aria-hidden="true" class="icon-left mdi mdi-file-document-box"></i>مثال Document</button> <button href="href="https://blog.itheric.com/" class="btn btn-raised btn-success btn-small"><i aria-hidden="true" class="icon-left mdi mdi-cloud-download"></i>مثال Download</button> <button href="href="https://blog.itheric.com/" class="btn btn-raised btn-warning btn-large"><i aria-hidden="true" class="icon-left mdi mdi-send"></i>مثال Send</button>
الزر المعطل
بإستخدام Html تستطيع تعطيل الازرار.
<button href="href="https://blog.itheric.com/" class="btn btn-large" disabled="disabled">مثال</button> <button class="btn" disabled="disabled">مثال</button> <button href="href="https://blog.itheric.com/" class="btn btn-flat" disabled="disabled">مثال</button> <button href="href="https://blog.itheric.com/" class="btn btn-flat btn-outline" disabled="disabled">مثال</button> <button href="href="https://blog.itheric.com/" class="btn btn-fab" disabled="disabled"><i aria-hidden="true" class="mdi mdi-plus"></i></button>
تخصيص
تستطيع بسهول تعطيل ازرارك.
<div class="btn-wrap">
<div class="btn-center">
<a href="#" class="btn btn-raised btn-secondary"><i aria-hidden="true" class="icon-left mdi mdi-eye"></i>معاينة</a>
<a href="#" class="btn btn-raised btn-primary"><i aria-hidden="true" class="icon-left mdi mdi-cloud-download"></i>تحميل</a>
<a href="#" class="btn btn-raised btn-dark"><i aria-hidden="true" class="icon-left mdi mdi-file-document-box"></i>الـشرح</a>
<a href="#" class="btn btn-raised btn-success"><i aria-hidden="true" class="icon-left mdi mdi-cart"></i>شـراء</a>
</div>
</div>