إضافة زر يغير لونه تدريجيا

زر بتلوين تدريجي

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

يمكنك أن ترى الزر أدناه

مدون متقن

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

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>