أزرار معاينة وتحميل بتأثيرات إحترافية

Unknown

7:49 ص

8 تعليقات

شاركه غرد جوجل+

بسم الله الرحمن الرحيم 

أهلا بكم متابعي مدونة حلم ويب في التدوينة الجديدة أزرار معاينة وتحميل بتأثيرات إحترافية 

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

إقرأ أيضا : إضافة أداة معاينة وتحميل بشكل جديد

للمعاينة المباشرة :

معاينة القالب
اضغط هنا...



تحميل القالب
اضغط هنا...

والأن بعد المعاينة سأشرح لكم طريقة التركيب

1. إذهب الى لوحة التحكم الخاصة بالمدونة
2. إذهب منها الى قالب وثم تحرير html
3. ابحث عن الوسم ]]></b:skin>  لنضع فوقه كود التنسيق :

/*--------------th3dreamweb.blogspot.com CSS buttonz---------------*/
.buttonz{display:inline-flex;border-radius:2px;cursor:pointer;font-size:14px;border: double;text-transform:uppercase;color:#fff!important;background:#FC5400;padding:8px 15px;transition: all .5s;}
.buttonz:hover{font: 14px;font-family: Electrolize,GESSTwoLight; box-shadow: 0px 0px 18px 18px rgba(80, 80, 80, 0); -webkit-animation: wobble .5s; -moz-animation: wobble .5s; -ms-animation: wobble .5s; -o-animation: wobble .5s; animation: wobble .5s;}
#wrap { margin: 20px auto; text-align: center; } #wrap br { display: none; } .btn-slide, .btn-slide2 { position: relative; display: inline-block; height: 50px; width: 220px; line-height: 50px; padding: 0; border-radius: 10px; background: #FDFDFD; border: 2px solid #446FAA; margin: 10px; transition: .5s; } .btn-slide2 { border: 2px solid #FC5400; } .btn-slide:hover { background-color: #446FAA; } .btn-slide2:hover { background-color: #FC5400; } .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #446FAA; } .btn-slide2:hover span.circle2 { color: #FC5400; } .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: #446FAA; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 10%; } .btn-slide2 span.circle2 { background-color: #FC5400; } .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: normal; color: #446FAA; transition: .5s; } .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { color: #FC5400; 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; }

والأن لكي تستعملها في التدوينة :

1. إذهب الى التدوينة 
2. اختار تحرير html
3. أضف الكود التالي :

<div id="wrap">
<a class="btn-slide" href="رابط معاينة القالب" target="_blank"><span style="font-family: inherit; font-size: large;">
<span class="circle"><i class="fa fa-rocket"></i></span><br />
<span class="title">معاينة القالب</span><br />
<span class="title-hover">اضغط هنا...</span><br />
</span></a><br />
<span style="font-family: inherit; font-size: large;"><a class="btn-slide2" href="رابط تحميل القالب" target="_blank"><br />
<span class="circle2"><i class="fa fa-download"></i></span><br />
<span class="title2">تحميل القالب</span><br />
<span class="title-hover2">اضغط هنا...</span></a></span></div>

هذه هي طريقة إستعمال الأزرار أتمنى انك(ي) قد أستفد(ة) من الموضوع اذا واجهتك(ي) مشكلة ضعها في تعليق