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

السلام عليكم ورحمه الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

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

للمعــــــاينـة

خطوات تركيب أزرار الويب المعاينة والتحميل

تابع معي ...

أولا - توجه إلى لوحة تحكم مدونتك من هنا

2 - قالب ( المظهر ) >> تحرير HTML >>

3 - إبحث عن الوسم التالي باستخدام الكيبورد CTRL + F

]]></b:skin>

4 - أضف الكود التالي قبله مباشرة (فوق)

#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;
}

وإضغط حفظ المظهر

الآن عندما تقوم بكتابة موضوع وتريد إضافة أزرار المعاينة والتحميل إضغط على تبويب HTML

وأضف الكود التالي في المكان الذي تريد

<div id="wrap">
<a href="#" class="btn-slide" target="_blank">

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

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