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

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

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

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

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

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

قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (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">

 معاينة
اضغط هنا
</a>
<a href="#" class="btn-slide2" target="_blank">

تحميل
اضغط هنا
</a>
</div>

اخر الاخبار

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

0 التعليقات:

إرسال تعليق

الأكثر مشاهدة

الأرشيف

Category

إنضموا لصفحتنا على الفيسبوك

إشترك بالقائمة البريدية ليصلك جديد المدونة

قسم شروحات أدسنس

إنضموا إلينا

نموذج الاتصال

من أنا