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

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

معاينة

طريقة تركيب الاضافة

ابحث عن الوسم

واضف الكود التالي فوقه

ثم ابحث عن الوسم

]]>

واضف الكود التالي فوقه

#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 {
    right: 100%;
    margin-right: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}
.btn-slide2:hover span.circle2 {
    color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    right: 40px;
    opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    right: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: right;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    right: 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;
    right: 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;
    right: 80px;
  }
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    right: 80px;
    opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

استخدام الازرار في الموضيع 

عند كتابة موضوع انتقل الي HTML

#" class="btn-slide">
 
  معاينة
  اضغط للمعاينة

#" class="btn-slide2">
 
  تحميل
  اضغط للتحميل

ملحوظه 

1- اضف بدل # رابط المعاينة .

2- اضف بدل # رابط التحميل.

تفضّل مشكوراً بمشاركة الموضوع