الاثنين، 11 مايو 2015

افضل أزرار بلوجر


كل من لديه مدونة ومهتم بالتدوين وبموقعه من ناحية الشكل ككل  يريد يوميا أن يجدد شيئ حتى ولو كان بسيط وإضافتنا لليوم عبارة عن أزرار مثل المستعملة في المدونة سبق وقدمت أزرار الجزء الأول والثاني هذه المرة ستكون مكتبة متجددة شهريا لأزرار مختلفة  بتصميم Css بسيطة وإحترافية في نفس الوقت،  لنعاين أولا الأشكال والتأثيرات الخاصة بالأزرار 






  • معاينة

  • قبل كل شيئ أضف الكوديين التاليين خاصيين بالأيقونات فوق </head> إذا كنت تتوفر عليهما فلا داعي لإضافتهما


    <link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
    <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

    لتغيير الأيقونات تابع التدوينة التالية هنا


    شرح طريقة التركيب Css



    1 . توجه لقالب >> تحرير 

    2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>

    أيضا يمكنك وضع الأكواد فوق </head> تكون أفضل بإستعمال الوسم <style> الكود بينهما </style>


    كود الأزرار الأولى


    /* CSS Button Style Simple*/
    .button{float:right;list-style:none;text-align:center;width:95%;margin:10px;
    padding:2px;font-size:14px;clear:both;}
    .button ul {margin:0;padding:0}
    .button li{display:inline;margin:0;padding:0}
    .demo {opacity:1;padding:7px 14px!important;background:#9eb2c0;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
    .download {opacity:1;padding:7px 14px!important;background:#fe4e3f;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
    .download2:hover,.demo2:hover,.demo1:hover,.demo:hover,.download1:hover,.download:hover {opacity:0.9;transition:opacity .4s ease-in-out;}
    .demo:before {content:&#39;\f06e&#39;;display:inline-block;;margin-left:10px;
    width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out; }
    .download:before {content:&#39;\f019&#39;;display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
    .download1 {opacity:1;padding:7px 14px!important;background:#FEC93F;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
    .download1:before {content:&#39;\f07b&#39;;display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
    .demo1 {opacity:1;padding:7px 14px!important;background:#FE843F;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
    .demo1:before {content:&#39;\f013&#39;;display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
    .demo2 {opacity:1;padding:7px 14px!important;background:#FE3F9B;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
    .demo2:before {content:&#39;\f0ee&#39;;display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
    .download2 {opacity:1;padding:7px 14px!important;background:#3FA2FE;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
    .download2:before {content:&#39;\f0c1&#39;;display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}

    كود الأزرار الثانية

    /* CSS Button Style Flat */
    .buttonhm{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
    .buttonhm li{display:inline;margin:0;padding:0;}
    .buttonhm li a{background:#3498db;display:inline-block;height:30px;margin:auto 5px;line-height:32px;width:120px;color:#fff !important;font-size:12px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:default !important;font-family:arial,sans-serif;font-weight:700;text-transform:uppercase;}
    .buttonhm li a:hover{background:#2980b9;}
    .buttonhm1 li a:hover{background:#C22D2D;}
    .buttonhm1{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
    .buttonhm1 li{display:inline;margin:0;padding:0;}
    .buttonhm1 li a{background:#DB3434;display:inline-block;height:30px;margin:auto 5px;line-height:32px;width:120px;color:#fff !important;font-size:12px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:default !important;font-family:arial,sans-serif;font-weight:700;text-transform:uppercase;}

    كود الأزرار الثالثة

    /* CSS Button Style Ar1web */
    .buttonar1web{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
    .buttonar1web li{display:inline;margin:0;padding:0;}
    .buttonar1web li a{padding:7px 20px;margin:auto 5px;font-size:13px;font-weight:bold;cursor:pointer;border-radius:2px;border:1px solid #ccc;text-shadow:1px 1px 0 #fff;color:#555 !important;background:#fff;background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f2f2f2));background:-webkit-linear-gradient(top, #fff, #f2f2f2);background:-moz-linear-gradient(top, #fff, #f2f2f2);background:-ms-linear-gradient(top, #fff, #f2f2f2);background:-o-linear-gradient(top, #fff, #f2f2f2);box-shadow:0 1px 2px #ddd;font-family: electrolize;}
    .buttonar1web li a:hover{border-color:#bbb;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);color:#111 !important;}

     طريقة التركيب Html

    1. إذا اردت إستخدام زر واحد إختر الكود من <a  إلى  <a/

    2. احذف الزر الذي لا تريده من <li> إلى </li>

    3. ضع بدل # الرابط

    4. المحدد باللون الأصفر هو كود لبداية كل زر ونهايته  </ul>


    كود الأزرار الأولى
    <div style='text-align: center;'>
    <ul class='button'>
    <li><a class='demo' href='#'>معاينة</a></li>
    <li><a class='demo1' href='#'>تخصيص</a></li>
    <li><a class='demo2' href='#'>رفع مباشر</a></li>
    <li><a class='download' href='#'>تحميل مباشر</a></li>
    <li><a class='download1' href='#'>تحميل الملف</a></li>
    <li><a class='download2' href='#'>الرابط مرفق</a></li>
    </ul>
    <div class='clear'/>
    كود الأزرار الثانية
    <div style='text-align: center'>
    <ul class='buttonhm'>
    <li><a href='#' target='_blank'>Live Demo</a></li>
    <li><a href='#' target='_blank'>Download</a></li>
    </ul>
    <ul class='buttonhm1'>
    <li><a href='#' target='_blank'>Live Demo</a></li>
    <li><a href='#' target='_blank'>Download</a></li>
    </ul>
    </div>
    <div class='clear'/>
    كود الأزرار الثالثة

    <div style='text-align: center'>
    <ul class='buttonar1web'>
    <li><a href='#' target='_blank'><i class='icon-eye-open'/> Live Demo</a></li>
    <li><a href='#' target='_blank'><i class='icon-link'/> Download</a></li>
    </ul>
    </div>
    <div class='clear'/>

    ليست هناك تعليقات:

    إرسال تعليق