أزرار تحميل ومعانية احترافية 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'/>


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

التعليقات

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

رسالة!

نأسف بشده عن عدم الرد علي بعض تعليقاتكم ورسائلكم ، نظرا لانشغالي بالامتحانات ، اتمني منكم الدعاء لي بالنجاح ، واتمني لقم قضاء أجمل الاوقات معنا في " برو ويب " وسوف اعود لكم في 24/6

اذا كان لديكم اي استفسار مهم تفضلو بمراسلتني من حسابي علي الفيسبوك من هنا

المشاركات الشائعة

أحدث التعليقات

تم النسخ