اضافة ازرار معاينة وتحميل بشكل جديد و احترافى بتقنية css

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

معاينة الأزرار مباشرة من مدونتى

معاينة اضغط هنا 

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

قم بالذهاب الي تحرير html وقوم بالبحث عن الكود التالي ]]></b:skin> ومن ثم أضف قبله مباشرة الكود التالى

#wrap {
margin: 20px auto;
text-align: center;
}
.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;
}

بعد اضافة كود الـ CSS ,عند استخدام الأزارا اذهب الو تبويب الـ html كما هو مبين بالشكل و أضف الكود التالى

ومن ثم أضف قبله مباشرة الكود التالى

<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>