اكتب ما تود البحت عنه و اضغط Enter
معذرة، فالصفحة التي تبحث عنها في هذه المدونة ليست متوفرة.

30‏/5‏/2016

اضافة زر بشكل متغير الالوان


إنشاء زر متعدد الألوان زر بسيط يمكن أن يغير اللون في حد ذاته فقط، زر فريد من نوعه لأنه ليس بشكل عام، وعادة  الأزرار لا تحتوي على أكواد الجافا، ولكن بخلاف هذا الزر فهو يتضمنه ويمكن إستعمال الأكواد في موضوع على حده لمن لا يريد أن يضيف الأكواد بداخل القالب، لذا فكود الجيكويري هو لتلوين اللون بتدرج.


شرح  طريقة التركيب

1 . توجه لقالب >> تحرير 
2. ابحث بإستعمال CTRL+F عن  ]]></b:skin>  أو ضعه بين <style>  </style>
3. ضع الكود التالي قبله [ فوقه ]
.buttonz{display:inline-flex;border-radius:4px;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;color:#FFF!important;
background:url(//ar1web-com.googlecode.com/svn/trunk/rainbow.png);background-size:cover;padding:8px 25px;text-shadow:none;transition:all 1s;}
.buttonz:hover, .buttonz:hover, .buttonz.link:hover {box-shadow: 0px 0px 18px 18px rgba(80, 80, 80, 0);} 

4. ضع الكود التالي إما فوق </head> أو فوق </body>
 <script type='text/javascript'>
var intval = null;
var pos = 0;
$(document).ready(function() {
intval = window.setInterval(moveBg, 70);
});
function moveBg() {
pos++;
$('.buttonz').css({backgroundPosition: (pos * 1) + '% 1px'});
}
  </script> 

5. لتفعيل الزر ضع الكود التالي بداخل الموضوع بتبويب HTML
 <a class='buttonz' href='هنا الرابط' target='_blank'>إسم الزر</a> 


منقول من : عرب ويب
.اتمنى ان يعجبكم الدرس.

شارك الموضوع عبر :

كاتب الموضوع :

هناك تعليقان (2):

جميع الحقوق محفوظة ل ويب تيك
صمم وكود بكل من طرف