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


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

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


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



طريقة تركيب الازرار
1- من لوحة التحكم >> قالب >> تحرير HTML
2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
3- قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)
4- قم بالبحث عن الكود
 ]]></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; }
5- اضف الكود التالي بداخل الموضوع في تبويب 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> 

واخيراً قم بالتغيرات المناسبة من خلال وضع رابط التحميل والمعاينة وغيرها

اتمنى  ان ينال اعجابكم الموضوع
دمتم في رعاية الله وحفظه


كود ازرارمعاينة و تحميل بشكل جديد واحترافي من الوليد نت كود ازرارمعاينة و تحميل بشكل جديد واحترافي من الوليد نت بواسطة walid al Bana on 11:31:00 م القسم: 5

ليست هناك تعليقات :

يتم التشغيل بواسطة Blogger.