أزرار تحميل ومعانية احترافية V2

السلام عليكم .... �� , دائما ما نبحث على اضافات جديدة وحديثة لمدونتنا , وبالتالى لابد ان تتوفر مدونتك على ازرار سواء كان للمعاينة او للتحميل بشكل احترافى ✨ وجميل لتكون مدونتك احترافية وجميلة �� , الازار احترافية وقررت اعرض عليكم النسخة الثانية الاحترافية , كى لا اطيل عليكم , تفضلو بمعاينة الاضافة


شرح طريقة التركيب
1.اذهب الى تحرير القالب ثم ابحث عن ]]></b:skin> وضع الكود التالي فوقه

الكود

#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
1.ثم ضع هذا الكود فى اى تدوينة لأظهار أزرار التحميل والمعاينة

الكود

<div id="wrap">
<a href="http://www.pro7web.com/" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">معاينة</span>
  <span class="title-hover">أضغط هنا</span>
</a>
<a href="http://www.pro7web.com/" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">أضغط هنا</span>
</a>
</div>
1 - غير http://www.pro7web.com/ برابط المعاينة
2- غير http://www.pro7web.com/ برابط التحميل

=> اذا لم تظهر لك الايقونات , أضف الكود التالي فوق <head/>

الكود

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


لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق

1 التعليقات:

الإبتساماتالإبتسامات

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة