أزرار تحميل ومعانية احترافية 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أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة

اقتباس لنزار قباني

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

للدخول الى الصفحة اضغط هنا

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

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