5/08/2019

settings_overscan print announcement
مرحبا إخواني..لا شك أنك تدرك دور وأهمية الأزرار في أي موقع أو مدونة فهي سبيلك الوحيد للتنقل بين الصفحات وتحميل المحتويات وغير ذلك لكن دعني أكلمك كصاحب موقع أو مدونة فأنت ملزم على تضمين الأزرار في صفحاتك بشكل دوري كما أنك تسهر على إختيار الشكل والتنسيق المناسب لكل زر وبما أن الأزرار مختلفة الشكل والحدث فهذا يعني شيئين .. ياإما تلجأ لشكل واحد لجميع الأزرار و هذا يجعله ربما ممل ... ويا إما تجد نفسك غارق في كومة من الأنماط المتعارضة والغير المتناسقة فقط لغرض إعطاء محتواك حيوية ولمسة أنيقة .. فلا تقلق لأن هناك عدة حلول وأهمها وأشهرها مكتبة Bootstrap Button الرسمية لكن العديد لايفضلها لعدة أسباب آخرها أنها تقيدك بالنماذج الاولية من حيث التصميم واختيار الالوان فتجد نفسك تلجأ لتكرار الاكواد.






ماسنقوم به هنا تركيب مكتبة css مصغرة تحتوي على أكواد خالصة للأزرار والأهم أنها تحتوى على أغلب التصاميم الحديثة بالإضافة إلى تقنية Ripple effect أو تأثير التموج عند النقر على الزر .. والجميل من ذلك كله ستحصل عند تحميلك للملف على هدية عبارة عن  أداة رائعة بمعنى الكلمة ستمكنك من تصميم الزر بسرعة و بكل سهولة .. ولن نطيل أكثر فدعونا نشرع في طريقة التركيب




لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب


لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية

  • قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود.css

  • 
    .btn{font-family: inherit;font-size:14px;font-weight:400;line-height:1.1;letter-spacing:inherit;text-transform:none;color:rgba(255,255,255,0.87);}.btn-default,.btn-link{color:rgba(0,0,0,0.87);}.btn{-webkit-user-select:none!important;-khtml-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;-o-user-select:none!important;user-select:none!important;display:-webkit-inline-flex;display:-ms-inline-flex;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-moz-box-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-items:center;}.btn.btn-block-out,.btn.btn-block{margin:5px auto;display:-webkit-flex;display:-ms-flex;display:flex;}.btn.btn-block-out{max-width:200px;}.btn.btn-block,.btn.btn-circle.btn-block{width:100%;}.btn-block-no{margin:4px 2px;}.btn-block+.btn-block{margin-top:5px;}.btn{outline:0;outline-offset:0;border:0;border:1px solid transparent;transition:all 0.15s ease-in-out;-o-transition:all 0.15s ease-in-out;-moz-transition:all 0.15s ease-in-out;-webkit-transition:all 0.15s ease-in-out;}.btn:focus,.btn:active,.btn.active,.btn:active:focus,.btn.active:focus{outline:0;outline-offset:0;}.btn i{margin:0 5px;}.btn-raised{-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,0.12),0 1px 2px 0 rgba(0,0,0,0.24);-moz-box-shadow:0 1px 3px 0 rgba(0,0,0,0.12),0 1px 2px 0 rgba(0,0,0,0.24);box-shadow:0 1px 3px 0 rgba(0,0,0,0.12),0 1px 2px 0 rgba(0,0,0,0.24);}.btn-raised:active,.btn-raised.active,.btn-raised:active:focus,.btn-raised.active:focus{-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);-moz-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);}.btn-raised:focus{-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);-moz-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);}.btn.btn-circle,.ink{padding:0;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%;border-radius:100%;}.btn.btn-circle-arc{-webkit-border-radius:30px;-moz-border-radius:30px;-ms-border-radius:30px;-o-border-radius:30px;border-radius:30px;}.btn.btn-circle-min{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;}.btn.btn-circle.btn-block{-webkit-border-radius:50px;-moz-border-radius:50px;-ms-border-radius:50px;-o-border-radius:50px;border-radius:50px;}.btn-Material-Design,.btn-Material:active,.btn-Material.active,.btn-Material:active:focus,.btn-Material.active:focus,.btn-Material:focus,.btn-Material:hover{-webkit-box-shadow:0 6px 15px rgba(0,0,0,0.16)!important;-moz-box-shadow:0 6px 15px rgba(0,0,0,0.16)!important;-ms-box-shadow:0 6px 15px rgba(0,0,0,0.16)!important;-o-box-shadow:0 6px 15px rgba(0,0,0,0.16)!important;box-shadow:0 6px 15px rgba(0,0,0,0.16)!important;}.btn-Material-Design:active,.btn-Material-Design.active,.btn-Material-Design:active:focus,.btn-Material-Design.active:focus,.btn-Material-Design:focus,.btn-Material-Design:hover{-webkit-box-shadow:none!important;-moz-box-shadow:none!important;-ms-box-shadow:none!important;-o-box-shadow:none!important;box-shadow:none!important;}.btn-default,.dropdown-toggle.btn-default{background-color:#fff;}.btn-default:hover,.dropdown-toggle.btn-default:hover{background-color:#e5e5e5;}.btn-default:active,.dropdown-toggle.btn-default:active,.btn-default.active,.dropdown-toggle.btn-default.active{background-color:#e5e5e5;}.btn-default:focus,.dropdown-toggle.btn-default:focus{background-color:#cccccc;}.btn-default:disabled,.dropdown-toggle.btn-default:disabled,.btn-default.disabled,.dropdown-toggle.btn-default.disabled,.btn-default[disabled],.dropdown-toggle.btn-default[disabled]{background-color:#b3b3b3;}.btn-flat.btn-default{color:#212121;background-color:#ffffff;}.btn-flat.btn-default:hover{color:#141414;background-color:#e5e5e5;}.btn-flat.btn-default:active,.btn-flat.btn-default.active{color:#020202;background-color:#cccccc;}.btn-flat.btn-default:focus{color:#000;background-color:#cccccc;}.btn-outline.btn-default{color:#212121;background-color:transparent;background-image:none;border-color:#212121;}.btn-outline.btn-default:hover,.btn-outline.btn-default:active,.btn-outline.btn-default.active,.btn-outline.btn-default:focus{color:#ffffff;background-color:#212121;}.btn-primary,.dropdown-toggle.btn-primary{background-color:#5677fc;}.btn-primary:hover,.dropdown-toggle.btn-primary:hover{background-color:#4e6cef;}.btn-primary:active,.dropdown-toggle.btn-primary:active,.btn-primary.active,.dropdown-toggle.btn-primary.active{background-color:#4e6cef;}.btn-primary:focus,.dropdown-toggle.btn-primary:focus{background-color:#455ede;}.btn-primary:disabled,.dropdown-toggle.btn-primary:disabled,.btn-primary.disabled,.dropdown-toggle.btn-primary.disabled,.btn-primary[disabled],.dropdown-toggle.btn-primary[disabled]{background-color:#b3b3b3;}.btn-flat.btn-primary{color:#5677fc;background-color:#ffffff;}.btn-flat.btn-primary:hover{color:#4e6cef;background-color:#e5e5e5;}.btn-flat.btn-primary:active,.btn-flat.btn-primary.active{color:#455ede;background-color:#cccccc;}.btn-flat.btn-primary:focus{color:#3b50ce;background-color:#cccccc;}.btn-outline.btn-primary{color:#5677fc;background-color:transparent;background-image:none;border-color:#5677fc;}.btn-outline.btn-primary:hover,.btn-outline.btn-primary:active,.btn-outline.btn-primary.active,.btn-outline.btn-primary:focus{color:#ffffff;background-color:#5677fc;}.btn-success,.dropdown-toggle.btn-success{background-color:#259b24;}.btn-success:hover,.dropdown-toggle.btn-success:hover{background-color:#0a8f08;}.btn-success:active,.dropdown-toggle.btn-success:active,.btn-success.active,.dropdown-toggle.btn-success.active{background-color:#0a8f08;}.btn-success:focus,.dropdown-toggle.btn-success:focus{background-color:#0a7e07;}.btn-success:disabled,.dropdown-toggle.btn-success:disabled,.btn-success.disabled,.dropdown-toggle.btn-success.disabled,.btn-success[disabled],.dropdown-toggle.btn-success[disabled]{background-color:#b3b3b3;}.btn-flat.btn-success{color:#259b24;background-color:#ffffff;}.btn-flat.btn-success:hover{color:#0a8f08;background-color:#e5e5e5;}.btn-flat.btn-success:active,.btn-flat.btn-success.active{color:#0a7e07;background-color:#cccccc;}.btn-flat.btn-success:focus{color:#056f00;background-color:#cccccc;}.btn-outline.btn-success{color:#259b24;background-color:transparent;background-image:none;border-color:#259b24;}.btn-outline.btn-success:hover,.btn-outline.btn-success:active,.btn-outline.btn-success.active,.btn-outline.btn-success:focus{color:#ffffff;background-color:#259b24;}.btn-info,.dropdown-toggle.btn-info{background-color:#03a9f4;}.btn-info:hover,.dropdown-toggle.btn-info:hover{background-color:#039be5;}.btn-info:active,.dropdown-toggle.btn-info:active,.btn-info.active,.dropdown-toggle.btn-info.active{background-color:#039be5;}.btn-info:focus,.dropdown-toggle.btn-info:focus{background-color:#0288d1;}.btn-info:disabled,.dropdown-toggle.btn-info:disabled,.btn-info.disabled,.dropdown-toggle.btn-info.disabled,.btn-info[disabled],.dropdown-toggle.btn-info[disabled]{background-color:#b3b3b3;}.btn-flat.btn-info{color:#03a9f4;background-color:#ffffff;}.btn-flat.btn-info:hover{color:#039be5;background-color:#e5e5e5;}.btn-flat.btn-info:active,.btn-flat.btn-info.active{color:#0288d1;background-color:#cccccc;}.btn-flat.btn-info:focus{color:#0277bd;background-color:#cccccc;}.btn-outline.btn-info{color:#03a9f4;background-color:transparent;background-image:none;border-color:#03a9f4;}.btn-outline.btn-info:hover,.btn-outline.btn-info:active,.btn-outline.btn-info.active,.btn-outline.btn-info:focus{color:#ffffff;background-color:#03a9f4;}.btn-warning,.dropdown-toggle.btn-warning{background-color:#ffc107;}.btn-warning:hover,.dropdown-toggle.btn-warning:hover{background-color:#ffb300;}.btn-warning:active,.dropdown-toggle.btn-warning:active,.btn-warning.active,.dropdown-toggle.btn-warning.active{background-color:#ffb300;}.btn-warning:focus,.dropdown-toggle.btn-warning:focus{background-color:#ffa000;}.btn-warning:disabled,.dropdown-toggle.btn-warning:disabled,.btn-warning.disabled,.dropdown-toggle.btn-warning.disabled,.btn-warning[disabled],.dropdown-toggle.btn-warning[disabled]{background-color:#b3b3b3;}.btn-flat.btn-warning{color:#ffc107;background-color:#ffffff;}.btn-flat.btn-warning:hover{color:#ffb300;background-color:#e5e5e5;}.btn-flat.btn-warning:active,.btn-flat.btn-warning.active{color:#ffa000;background-color:#cccccc;}.btn-flat.btn-warning:focus{color:#ff8f00;background-color:#cccccc;}.btn-outline.btn-warning{color:#ffc107;background-color:transparent;background-image:none;border-color:#ffc107;}.btn-outline.btn-warning:hover,.btn-outline.btn-warning:active,.btn-outline.btn-warning.active,.btn-outline.btn-warning:focus{color:#ffffff;background-color:#ffc107;}.btn-danger,.dropdown-toggle.btn-danger{background-color:#fc4b4b;}.btn-danger:hover,.dropdown-toggle.btn-danger:hover{background-color:#f4511e;}.btn-danger:active,.dropdown-toggle.btn-danger:active,.btn-danger.active,.dropdown-toggle.btn-danger.active{background-color:#f4511e;}.btn-danger:focus,.dropdown-toggle.btn-danger:focus{background-color:#f4511e;}.btn-danger:disabled,.dropdown-toggle.btn-danger:disabled,.btn-danger.disabled,.dropdown-toggle.btn-danger.disabled,.btn-danger[disabled],.dropdown-toggle.btn-danger[disabled]{background-color:#b3b3b3;}.btn-flat.btn-danger{color:#ff5722;background-color:#ffffff;}.btn-flat.btn-danger:hover{color:#ff5722;background-color:#e5e5e5;}.btn-flat.btn-danger:active,.btn-flat.btn-danger.active{color:#e64a19;background-color:#cccccc;}.btn-flat.btn-danger:focus{color:#d84315;background-color:#cccccc;}.btn-outline.btn-danger{color:#fc4b4b;background-color:transparent;background-image:none;border-color:#fc4b4b;}.btn-outline.btn-danger:hover,.btn-outline.btn-danger:active,.btn-outline.btn-danger.active,.btn-outline.btn-danger:focus{color:#ffffff;background-color:#fc4b4b;}.btn-download,.dropdown-toggle.btn-download{background-color:#45c481;}.btn-download:hover,.dropdown-toggle.btn-download:hover{background-color:#3fb074;}.btn-download:active,.dropdown-toggle.btn-download:active,.btn-download.active,.dropdown-toggle.btn-download.active{background-color:#3fb074;}.btn-download:focus,.dropdown-toggle.btn-download:focus{background-color:#3fb074;}.btn-download:disabled,.dropdown-toggle.btn-download:disabled,.btn-download.disabled,.dropdown-toggle.btn-download.disabled,.btn-download[disabled],.dropdown-toggle.btn-download[disabled]{background-color:#b3b3b3;}.btn-flat.btn-download{color:#45c481;background-color:#ffffff;}.btn-flat.btn-download:hover{color:#45c481;background-color:#e5e5e5;}.btn-flat.btn-download:active,.btn-flat.btn-download.active{color:#45c481;background-color:#cccccc;}.btn-flat.btn-download:focus{color:#45c481;background-color:#cccccc;}.btn-outline.btn-download{color:#45c481;background-color:transparent;background-image:none;border-color:#45c481;}.btn-outline.btn-download:hover,.btn-outline.btn-download:active,.btn-outline.btn-download.active,.btn-outline.btn-download:focus{color:#ffffff;background-color:#45c481;}.btn-View,.dropdown-toggle.btn-View{background-color:#ab7fdd;}.btn-View:hover,.dropdown-toggle.btn-View:hover{background-color:#8757be;}.btn-View:active,.dropdown-toggle.btn-View:active,.btn-View.active,.dropdown-toggle.btn-View.active{background-color:#8757be;}.btn-View:focus,.dropdown-toggle.btn-View:focus{background-color:#8757be;}.btn-View:disabled,.dropdown-toggle.btn-View:disabled,.btn-View.disabled,.dropdown-toggle.btn-View.disabled,.btn-View[disabled],.dropdown-toggle.btn-View[disabled]{background-color:#b3b3b3;}.btn-flat.btn-View{color:#ab7fdd;background-color:#ffffff;}.btn-flat.btn-View:hover{color:#ab7fdd;background-color:#e5e5e5;}.btn-flat.btn-View:active,.btn-flat.btn-View.active{color:#ab7fdd;background-color:#cccccc;}.btn-flat.btn-View:focus{color:#ab7fdd;background-color:#cccccc;}.btn-outline.btn-View{color:#ab7fdd;background-color:transparent;background-image:none;border-color:#ab7fdd;}.btn-outline.btn-View:hover,.btn-outline.btn-View:active,.btn-outline.btn-View.active,.btn-outline.btn-View:focus{color:#ffffff;background-color:#ab7fdd;}.btn-flat.btn-info .ink{background-color:#808080;}.btn-info .ink,.dropdown-toggle.btn-info .ink{background-color:#72d3ff;}.btn-flat.btn-success .ink{background-color:#808080;}.btn-success .ink,.dropdown-toggle.btn-success .ink{background-color:#ceffcb;}.btn-flat.btn-primary .ink{background-color:#808080;}.btn-primary .ink,.dropdown-toggle.btn-primary .ink{background-color:#9eacff;}.btn-flat.btn-default .ink{background-color:#808080;}.btn-default .ink,.dropdown-toggle.btn-default .ink{background-color:#b8b8b8;}.btn-flat.btn-warning .ink{background-color:#808080;}.btn-warning .ink,.dropdown-toggle.btn-warning .ink{background-color:#ffdbac;}.btn-flat.btn-danger .ink{background-color:#808080;}.btn-danger .ink,.dropdown-toggle.btn-danger .ink{background-color:#ffccbc;}.btn-flat.btn-download .ink{background-color:#808080;}.btn-download .ink,.dropdown-toggle.btn-download .ink{background-color:#56d591;}.btn-flat.btn-View .ink{background-color:#808080;}.btn-View .ink,.dropdown-toggle.btn-View .ink{background-color:#b893e3;}.btn-Material .ink{background-color:#ffffff!important;background:#ffffff;}.btn{min-width:88px;padding:10px;}.btn-lg,.btn-group-lg .btn{min-width:122px;padding:10px 16px;font-size:18px;line-height:1.3;}.btn-no,.btn-group-no .btn{font-size:14px;}.btn-sm,.btn-group-sm .btn{min-width:64px;padding:4px 12px;font-size:12px;line-height:1.5;}.btn-xs,.btn-group-xs .btn{min-width:46px;padding:2px 10px;font-size:10px;line-height:1.5;}.btn-circle{width:56px;height:56px;min-width:56px;}.btn-circle span{line-height:56px;}.btn-circle.btn-lg{width:78px;height:78px;min-width:78px;}.btn-circle.btn-lg span{line-height:78px;}.btn-circle.btn-sm{width:40px;height:40px;min-width:40px;}.btn-circle.btn-sm span{line-height:40px;}.btn-circle.btn-xs{width:30px;height:30px;min-width:30px;}.btn-circle.btn-xs span{line-height:30px;}.btn-group.open .dropdown-toggle{outline:0;outline-offset:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}.btn-group .btn + .btn,.btn-group .btn + .btn-group,.btn-group .btn-group + .btn,.btn-group .btn-group + .btn-group{margin-left:0;}.btn-group .btn:hover,.btn-group-vertical .btn:hover{z-index:0;}.btn-group .btn:focus:hover,.btn-group-vertical .btn:focus:hover,.btn-group .btn:active:hover,.btn-group-vertical .btn:active:hover,.btn-group .btn.active:hover,.btn-group-vertical .btn.active:hover{z-index:2;}.ripple-effect,button{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0);}.ink{display:block;position:absolute;pointer-events:none;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);background:#fff;opacity:1;}.ink.animate{-webkit-animation:ripple .5s linear;-moz-animation:ripple .5s linear;-ms-animation:ripple .5s linear;-o-animation:ripple .5s linear;animation:ripple .5s linear;}@keyframes ripple{100%{opacity:0;transform:scale(2.5);}}@-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2.5);transform:scale(2.5);}}@-moz-keyframes ripple{100%{opacity:0;-moz-transform:scale(2.5);transform:scale(2.5);}}@-ms-keyframes ripple{100%{opacity:0;-ms-transform:scale(2.5);transform:scale(2.5);}}@-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2.5);transform:scale(2.5);}}
    

    ملاحظة مهمة
    لاحظ أن كود المكتبة كبير الحجم نوعاما تستطيع رفعه على موقع إستضافة خارجي إذا أردت.. كما أنك ستجد في ملف المكتبة عند التحميل نفس الكود بدون ضغط ليسهل قرائته أو تعديله.
    النقطة الأخرى هي المهمة بعض القوالب تستعمل نفس المعرف .btn لذلك وجب مراعات التعارض إذا حدث معك.

  • قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js

  • 
     <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> 
    

    ماهو عمل هذا السكريبت ؟
    هذا السكريبت خاص بتقنية Ripple effect أو تأثير التموج عند النقر على الزر وربما قد لاحظت ذلك عند النقر على أزرار خدمات أو منتجات العملاق Google


الخطوة الأخيرة

    تحميل الملف
    الآن عليك تحميل الملف الملحق في الأسفل وعندها ستجد داخله نسخ إحتياطية لملف السكريبت بدون ضغط وكذلك ملف الأنماط css..طببعاهي نفسها التي قمنا بتركيبها سابقا
    مايهمنا في المجلد ستجد ملف بإسم (مولد الأزرار) قم بفتحه ثم إضغط على الملف بإسم (Générateur) ليفتح معك على المتصفح على شكل أداة تسهل عليك تصميم الزر أو مجموعة كاملة في نفس الوقت...ثم بعدها الحصول على كود HTML لوضعه في مدونتك سواء داخل التدوينات أو في محرر القالب.

عارضة للمصمم لفهم بيئة العمل!!

سيكون الغرض من الشرح الآتي هو فهم لبنية التصاميم التي تحتويها المكتبة وسهولة التعامل مع المتغيرات النمطية كما أنك بعد هذا الشرح ستفهم طريقة عمل أداة مولد الأزرار عند إستخدامه وستدرك جيدا أهميته كونه يزيح عنك عناء كتابة الأكواد يدويا.

خيارات

    الأزرار الافتراضية
    استخدم أيًا من فئات الأزرار المتاحة لإنشاء زر على نحو سريع..والتي ستجدها متوفرة بأكثر من لون

    
    <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>
    



أحجام نصف القطر

    أحجام border-radius
    استخدم أي من فئات الأزرار المتاحة بأحجام نصف القطر المختلفة أضف
    btn-circle للحجم الدائري الكامل / 100%
    أو btn-circle-min للحجم الدائري عند الحافة /3px
    أو btn-circle-arc للحجم الدائري المقوس /30px
    border-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

    Ripple effect
    استخدم أي من فئات الأزرار المتاحة مصحوبة بتأثير التموج عند النقر على الزر يتطلب تأثير التموج 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>
    




add_commentإرسال تعليق

  1. مرحبا عندي مشكلة لا يظهر تائثير تمويج

    ردحذف
    الردود
    1. مرحبا بك..لكي تشتغل الميزة تأكد أنك قمت بهذه الخطوات
      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>

      وفي حال لم يشتغل بعد أرسل لنا رابط المعاينة لإكتشاف المشكل..بالتوفيق

      حذف