أزرار التحميل و المعاينة بشكل مميز و متحرك

أزرار التحميل والمعاينة بشكل رائع و متحرك

السلام عليكم ورحمة الله تعالى و بركاته إخواني الكرام في هذه الحلقة سأُري  لكم إضافة مميزة وهي عبارة عن بعض الازرار (أزرار التحميل و أزرار المعاينة) و التي تستعمل بكثرة في العديد من المدونات و المواقع الشخصية لعرض بعض التجارب والمعاينات و مواقع التحميل أو بعض الأمور الأخرى التي يتم وضع معاينة وتحميل لها والان يمكنك جعل تلك الازرار أكثر جاذبية

لتركيب الشكل كل ما عليك هو الدخول الى تحرير القالب والبحث عن هذه الكلمة  ]]></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;
}

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

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

.btn-slide span.circle, .btn-slide2 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 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 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 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

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

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

الآن تكون قد ركبت الكود المسؤول عن شكل الأزرار تبقى لديك خطوة واحدة فقط وهي عند كتابة أي موضوع وتريد وضع الازرار في الموضوع اتبع الخطوات التالية :

أولا عند كتابة الموضوع حدد المكان الذي تريد ان تضهر فيه الازرار هل في الاسفل ام في الوسط يكفي فقط ان تكتب كلمة "botons" مثلا في المكان الذي تريد أن تضع فيه الازرار وبعد ان تنتهي من الموضوع قم بتحويل المحرر من تأليف إلى HTML ثم قم بالبحث عن الكلمة التي كتبتها في البداية وأٌقصد هذه الكلمة "botons" بعد أن تجدها ضع مكانها الكود التالي :

<div id="wrap">
<a href="رابط المعاينة" 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="رابط التحميل" 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>

للمعاينة

معاينة اضغط هنا تحميل اضغط هنا

ثم ضع رابط التحميل ورابط المعاينة في المكانين المحددين بالألوان في الكود ثم قم بحفظ الموضوع ......
هذا فقط لو لديك أي استفسار او واجهتك أي مشكلة لا تتردد في وضعها في رد هذا كل شيئ بالتوفيق للجميع و إلى حلقة أخرى ان شاء الله

• غرد
• شاركه
• شاركه
• شاركه
• شاركه

عن الكاتب Unknown

مري 15 سنة اعيش بمدينة وجد .أهتم بكل ماهو جديد في العالم الافتراضي .و أهدف الى تطوير المحتوى المعلوماتي العربي

مقالات قد تهمك