زر 3D بإستخدام CSS لمدونات بلوجر

زر 3D بإستخدام CSS لمدونات بلوجر

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

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

انقر للمشاهدة!

لإضافة هذا الزر لمدونتك ادخل لوحة التحكم ثم القالب ثم أنقر على تحرير html  ثم لصق الكود التالي فوق الرمز ]]></b:skin> ثم احفظ القالب


.a_demo_two {
    background-color:#6fba26;
    padding:10px;
    position:relative;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
    box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
    border-radius: 5px;
}

.a_demo_two:active {
    top:7px;
    background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
    box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
    color: #156785;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
    background: rgb(44,160,202);
}
.a_demo_two::before {
    background-color:#072239;
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    padding-left:2px;
    padding-right:2px;
    padding-bottom:4px;
    left:-2px;
    top:5px;
    z-index:-1;
    border-radius: 6px;
    box-shadow: 0px 1px 0px #fff;
}

.a_demo_two:active::before {
    top:-2px;
}

ثم إستخدام الكود التالي داخل مواضيع مدونتك من خلال النقر على زر html بجانب زر التأليف في محرر المشاركات ثم لصق الكود التالي:

<a class="a_demo_two" href="http://www.demoo.madad2.com/" rel="nofollow" target="_blank"><span style="font-size: large;"><b>انقر للمشاهدة!</b></span></a>



أو إذا لم تكن ترغب بإضافة الكود الأول فوق الرمز ]]></b:skin> يمكنك نسخ الكود التالي بالكامل ولصقه داخل محرر المواضيع في مدونتك من خلال النقر على html:


<a class="a_demo_two" href="http://www.demoo.madad2.com/" rel="nofollow" target="_blank"><span style="font-size: large;"><b>انقر للمشاهدة!</b></span></a>
<style>
.a_demo_two {
    background-color:#6fba26;
    padding:10px;
    position:relative;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
    box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
    border-radius: 5px;
}

.a_demo_two:active {
    top:7px;
    background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
    box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
    color: #156785;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
    background: rgb(44,160,202);
}
.a_demo_two::before {
    background-color:#072239;
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    padding-left:2px;
    padding-right:2px;
    padding-bottom:4px;
    left:-2px;
    top:5px;
    z-index:-1;
    border-radius: 6px;
    box-shadow: 0px 1px 0px #fff;
}

.a_demo_two:active::before {
    top:-2px;
}
</style>

لاي إستفسار لا تتردد في طلب المساعدة!


مشاركات أقدم المقال التالي
6 تعليق
  • مصطفى العراقي
    مصطفى العراقي 15‏/04‏/2015، 7:39:00 م

    السلام عليكم؟
    كيف حالك أخي؟
    لدي اضافة المتواجدون الان؟
    لاتبدو بشكل صحيح؟أنظر يظهر 500 اونلاين وأنا أشك أنهم 20 هههههه؟ كيف أقوم بتصحيحها من خلال خبرتك؟
    http://www.up-00.com/VeJJVpfe

    • مداد الجليد
      مداد الجليد 16‏/04‏/2015، 8:03:00 م

      جرب إضافة خاصة بمدونتك لانها قد تكون اضافة لقوالب كثيرة

  • moh kamil
    moh kamil 07‏/07‏/2018، 12:35:00 ص

    السلام عليكم
    بارك الله فيك على الموضوع، لدي طلب اريد كود هتمل أو جافا سكريبت لوضع زر button فوق صورة بعد النقر عليه تفتح صفحة أو رابط اخر.
    يرجى مساعدتي ولك الشكر الجزيل.وفقك الله.

    • مداد الجليد
      مداد الجليد 07‏/07‏/2018، 8:02:00 م

      وعليكم السلام
      أخي لا تحتاج كود فقط أنقر على الصورة نقرة ثم أنقر على الارتباط نقرتين واضف الرابط

أضف تعليق
عنوان التعليق