كمشرف موقع لا شك أنك تدرك دور وأهمية الأزرار للمستخدم فهي السبيل الوحيد للتنقل بين الصفحات وتحميل الملحقات وغير ذلك..فأنت ملزم على تضمين الأزرار في صفحاتك بشكل دوري كما أنك تسهر على إختيار الشكل والتنسيق المناسب لكل زر وبما أن الأزرار مختلفة الشكل والحدث فهذا يعني شيئين .. ياإما تلجأ لشكل واحد لجميع الأزرار و هذا يجعله ربما ممل ... أو إما تجد نفسك غارق في كومة من الأنماط المتعارضة والغير المتناسقة فقط لغرض إعطاء محتواك حيوية ولمسة أنيقة .. فلا تقلق لأن هناك عدة حلول وأهمها وأشهرها مكتبة Bootstrap Button الرسمية لكن العديد لايفضلها لعدة أسباب آخرها أنها تقيدك بالنماذج الاولية من حيث التصميم واختيار الالوان فتجد نفسك تلجأ لتكرار الاكواد.
تركيب المكتبة
ماسنقوم به هنا تركيب مكتبة css مصغرة تحتوي على أكواد خالصة للأزرار والأهم أنها تحتوى على أغلب التصاميم الحديثة بالإضافة إلى تقنية Ripple effect أو تأثير التموج عند النقر على الزر .. والجميل من ذلك كله ستحصل عند تحميلك للملف على هدية عبارة عن أداة رائعة بمعنى الكلمة ستمكنك من تصميم الزر بسرعة و بكل سهولة .. ولن نطيل أكثر فدعونا نشرع في طريقة التركيبعارضة للمصمم لفهم بيئة العمل!!
سيكون الغرض من الشرح الآتي هو فهم لبنية التصاميم التي تحتويها المكتبة وسهولة التعامل مع المتغيرات النمطية كما أنك بعد هذا الشرح ستفهم طريقة عمل أداة مولد الأزرار عند إستخدامه وستدرك جيدا أهميته كونه يزيح عنك عناء كتابة الأكواد يدويا.-
خيارات - الأزرار الافتراضية
استخدم أيًا من فئات الأزرار المتاحة لإنشاء زر على نحو سريع..والتي ستجدها متوفرة بأكثر من لون
<button type="button" class="btn btn-primary"> <i class="material-icons">star</i> primary </button> <button type="button" class="btn btn-download"> <i class="material-icons">cloud_download</i> download </button> <button type="button" class="btn btn-View"> <i class="material-icons">visibility</i> View </button> <button type="button" class="btn btn-default"> <i class="material-icons">flag</i> default </button> <button type="button" class="btn btn-success"> <i class="material-icons">check_circle</i> success </button> <button type="button" class="btn btn-info"> <i class="material-icons">report</i> info </button> <button type="button" class="btn btn-warning"> <i class="material-icons">warning</i> warning </button> <button type="button" class="btn btn-danger"> <i class="material-icons">cancel</i> danger </button>
-
أحجام نصف القطر
استخدم أي من فئات الأزرار المتاحة بأحجام نصف القطر المختلفة أضف
btn-circle للحجم الدائري الكامل / 100%
أو btn-circle-min للحجم الدائري عند الحافة /3px
أو btn-circle-arc للحجم الدائري المقوس /30pxborder-radius -100%- btn-circle border-radius -3px- btn-circle-min border-radius -30px- btn-circle-arc
<button type="button" class="btn btn-primary btn-circle"><i class="fa fa-star"></i></button> <button type="button" class="btn btn-View btn-circle"><i class="fa fa-star"></i></button> <button type="button" class="btn btn-default btn-circle"><i class="fa fa-star"></i></button> <button type="button" class="btn btn-primary btn-circle-min"><i class="fa fa-star">primary</i></button> <button type="button" class="btn btn-View btn-circle-min"><i class="fa fa-star"></i>View</button> <button type="button" class="btn btn-default btn-circle-min"><i class="fa fa-star"></i>default</button> <button type="button" class="btn btn-primary btn-circle-arc"><i class="fa fa-star">primary</i></button> <button type="button" class="btn btn-View btn-circle-arc"><i class="fa fa-star"></i>View</button> <button type="button" class="btn btn-default btn-circle-arc"><i class="fa fa-star"></i>default</button> -
أنواع التصاميم - الأزرار الثقيلة
استخدم أي من فئات الأزرار المتاحة لإنشاء زر إحترافي. كما يمكنك مزج أنواع مع بعضها.Default buttons Material-google buttons Material-Design buttons Raised buttons Flat buttons Circle buttons -FAB- Circle + Material-google buttons Circle + Material-Design buttons Circle + Raised buttons Circle + Flat buttons
<!-- Default button --> <button type="button" class="btn btn-default">Default</button> <!-- Material-google button --> <button type="button" class="btn btn-Material btn-default">Default</button> <!-- Material-Design button --> <button type="button" class="btn btn-Material-Design btn-default">Default</button> <!-- Raised button --> <button type="button" class="btn btn-raised btn-default">Default</button> <!-- Flat button --> <button type="button" class="btn btn-flat btn-default">Default</button> <!-- Circle button (FAB) --> <button type="button" class="btn btn-circle btn-default">Default</button> <!-- Circle + Raised button --> <button type="button" class="btn btn-circle btn-raised btn-default">Default</button> <!-- Circle + Flat button --> <button type="button" class="btn btn-circle btn-flat btn-default">Default</button>
-
أنواع التصاميم - أزرار المخطط التفصيلي
في حاجة إلى زر ، ولكن ليس الألوان الخلفية الثقيلة ؟ استبدل فئات التعديل الافتراضية بـ btn-outline تلك لإزالة كل صور الخلفية والتأثيرات على أي زر.
<button type="button" class="btn btn-primary btn-outline"> <i class="material-icons">star</i> primary </button> <button type="button" class="btn btn-download btn-outline"> <i class="material-icons">cloud_download</i> download </button> <button type="button" class="btn btn-View btn-outline"> <i class="material-icons">visibility</i> View </button> <button type="button" class="btn btn-default btn-outline"> <i class="material-icons">flag</i> default </button> <button type="button" class="btn btn-success btn-outline"> <i class="material-icons">check_circle</i> success </button> <button type="button" class="btn btn-info btn-outline"> <i class="material-icons">report</i> info </button> <button type="button" class="btn btn-warning btn-outline"> <i class="material-icons">warning</i> warning </button> <button type="button" class="btn btn-danger btn-outline"> <i class="material-icons">cancel</i> danger </button>الرسوم المتحركة CSS Animated
استخدم أي من فئات الأزرار المتاحة مصحوبة بتأثير التموج عند النقر على الزر يتطلب تأثير التموج JS لإنشاء أو حقن عنصر في الزر لتحكم في الرسوم المتحركة CSS3. إذا كنت ترغب في استخدام هذا التأثير ، فيجب عليك إضافة ripple-effect إلى الزر الخاص بك وإليك الأمثلة
<button class="btn btn-primary btn-Material ripple-effect" type="button"> <i class="material-icons">star</i> primary </button> <button class="btn btn-primary btn-outline ripple-effect" type="button"> <i class="material-icons">star</i> primary </button> <button type="button" class="btn btn-circle btn-primary btn-Material ripple-effect"> <i class="fa fa-star"></i> </button>الأحجام - أحجام مختلفة
استخدم أي من فئات الأزرار المتاحة بأحجام مختلفة أضف btn-lg للحجم الكبير أو btn-no للحجم العادي أو btn-sm للحجم المتوسط أو btn-xs للحجم الصغير وذلك للحصول على أحجام إضافية.Large buttons btn-lg Default buttons btn-no Small buttons btn-sm Extra small buttons btn-xs
<button class="btn btn-primary btn-raised ripple-effect btn-lg" type="button">Raised</button> <button class="btn btn-primary btn-flat ripple-effect btn-lg" type="button">flat</button> <button class="btn btn-circle btn-primary btn-raised ripple-effect btn-lg" type="button"><i class="fa fa-star"></i></button> <button class="btn btn-circle btn-primary btn-flat ripple-effect btn-lg" type="button"><i class="fa fa-star"></i></button> <button class="btn btn-primary btn-raised ripple-effect btn-no" type="button">Raised</button> <button class="btn btn-primary btn-flat ripple-effect btn-no" type="button">flat</button> <button class="btn btn-circle btn-primary btn-raised ripple-effect btn-no" type="button"><i class="fa fa-star"></i></button> <button class="btn btn-circle btn-primary btn-flat ripple-effect btn-no" type="button"><i class="fa fa-star"></i></button> <button class="btn btn-primary btn-raised ripple-effect btn-sm" type="button">Raised</button> <button class="btn btn-primary btn-flat ripple-effect btn-sm" type="button">flat</button> <button class="btn btn-circle btn-primary btn-raised ripple-effect btn-sm" type="button"><i class="fa fa-star"></i></button> <button class="btn btn-circle btn-primary btn-flat ripple-effect btn-sm" type="button"><i class="fa fa-star"></i></button> <button class="btn btn-primary btn-raised ripple-effect btn-xs" type="button">Raised</button> <button class="btn btn-primary btn-flat ripple-effect btn-xs" type="button">flat</button> <button class="btn btn-circle btn-primary btn-raised ripple-effect btn-xs" type="button"><i class="fa fa-star"></i></button> <button class="btn btn-circle btn-primary btn-flat ripple-effect btn-xs" type="button"><i class="fa fa-star"></i></button>أوجه العرض - أزرار مستوى الكتلة
قم بإنشاء أزرار مستوى الكتلة - التي تغطي العرض الكامل 100% داخل الحاوية - عن طريق إضافة btn-block.
أوالتي تأخذ مكان الوسط 200px مع حفظ مسافة الجانبين عن طريق إضافة btn-block-out.
<button type="button" class="btn btn-primary btn-Material btn-circle-min ripple-effect btn-block"> <i class="fa fa-minus-circle"></i> Buttons </button> <button type="button" class="btn btn-primary btn-flat btn-circle-arc ripple-effect btn-block"> <i class="fa fa-minus-circle"></i> Buttons </button> <button type="button" class="btn btn-primary btn-Material btn-circle-min ripple-effect btn-block-out"> <i class="fa fa-minus-circle"></i> Buttons </button> <button type="button" class="btn btn-primary btn-flat btn-circle-arc ripple-effect btn-block-out"> <i class="fa fa-minus-circle"></i> Buttons </button>
مرحبا عندي مشكلة لا يظهر تائثير تمويج
ردحذفمرحبا بك..لكي تشتغل الميزة تأكد أنك قمت بهذه الخطوات
حذف1-تركيب السكريبت الخاص بتأثير التموج فوق وسم </body>
<script type='text/javascript'>
//<![CDATA[
!function(h){h(".ripple-effect").click(function(t){var e=h(this);0==e.find(".ink").length&&e.append("<span class='ink'></span>");var i=e.find(".ink");if(i.removeClass("animate"),!i.height()&&!i.width()){var a=Math.max(e.outerWidth(),e.outerHeight());i.css({height:a,width:a})}var n=t.pageX-e.offset().left-i.width()/2,s=t.pageY-e.offset().top-i.height()/2;i.css({top:s+"px",left:n+"px"}).addClass("animate")})}(jQuery);
//]]>
</script>
2-إضافة إسم الفئة ripple-effect إلى الزر الخاص بك
<button class="btn btn-primary btn-Material ripple-effect" type="button">ok</button>
وفي حال لم يشتغل بعد أرسل لنا رابط المعاينة لإكتشاف المشكل..بالتوفيق