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

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


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

الكود

#wrap br {
    display: none;
}

.btn-slide-Pro7web, .btn-slide2-Pro7web {
    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-Pro7web {
    border: 2px solid #efa666;
}

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

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

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

.btn-slide2-Pro7web:hover span.circle2 {
    color: #efa666;
}

.btn-slide-Pro7web:hover span.title, .btn-slide2-Pro7web:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide-Pro7web:hover span.title-hover, .btn-slide2-Pro7web:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide-Pro7web span.circle, .btn-slide2-Pro7web span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2-Pro7web span.circle2 {
    background-color: #efa666;
}

.btn-slide-Pro7web span.title,
  .btn-slide-Pro7web span.title-hover, .btn-slide2-Pro7web span.title2,
  .btn-slide2-Pro7web span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2-Pro7web span.title2,
  .btn-slide2-Pro7web span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.btn-slide-Pro7web span.title-hover, .btn-slide2-Pro7web span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide-Pro7web span.title-hover, .btn-slide2-Pro7web span.title-hover2 {
    color: #fff;
       } </style>

الكود

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


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

3 التعليقات

avatar

هناك خطئ في الكود الثاني

avatar

تم تصليح الخطأ عزيزي
حاول مره اخري

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

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