أزرار معاينة وتحميل إحترافية ~ ألفا التقنية

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

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

معاينة إنقر هنا تحميل إنقر هنا

كيف ذلك؟

1-في البداية حمل الملف الذي يحتوي على الأكواد أسفل التدوينة

2-توجه نحو المظهر ثم حرر HTML

3-ألصق الكود التالي مباشرة وراء وسم head

4-ألصق الكود التالي فوق وسم الإغلاق skin/

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

#warch br {
    display: none;
}

.mo-slide, .mo-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;
}

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

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

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

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

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

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

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

.mo-slide span.circle, .mo-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%;
}

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

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

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

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

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

5-حفظ المظهر

6-على أي مشاركة أو تدوينة, أين ما تريد ألصق الكود التالي بعد الإنتقال من تأليف إلى HTML

ملاحظة:
الروابط الخارجية تضعها مكان كلمة "رابط"
يمكنك استبدال الكلمات مثل "معاينة" و"تحميل"... وكذلك والرموز يمكنك ذلك من الموقع Fontawesome.

شاهد التطبيق على الفيديو