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

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

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

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

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

طريقة اضافة الأزرار الى المدونة

1. 1. من لوحة التحكم >> قالب >> تحرير HTML
   2. خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
   3. و اتبع ما يلى

• أولا كود : الـ CSS
• ثانيا كود : الـ html

قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

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

حمل الكود من هنا ......... تحميل الكود