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

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

معاينة

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

ابحث عن الوسم

</head>

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

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

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

]]></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 {
    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

<div id="wrap">
<a href="#" class="btn-slide">
  <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">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">اضغط للتحميل</span>
</a>
</div>

ملحوظه 

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

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