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

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

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

صفحة الهدايا

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

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> 

• 
  إضافة محتوى مخفي في موضوع
  بسم الله الرحمن الرحيم، بداية أسبوع موفقة للجميع... عدت لكم مع إضافة جد مفيدة ورائعة ل
• 
  تأثيرات Css فريدة
  مرحباً بالجميع وبداية أسبوع موفقة لكل زائر. تدوينتنا لليوم لا تقل عن الإضافات التي ق
• 
  قوائم لعرض النصوص
  السلام عليكم ورحمة الله تعالى وبركاته ، إضافة النهار عبارة عن شرائح تعرض فيها نصوص أو ش
• 
  إضافة أيقونة المساعدة منبثقة
  عند إنشاء تطبيق على شبكة الأنترنت أو موضوع، تحتاج إلى لفت إنتباه الزائر إما تكون بطري
• 
  صناديق واردة الشكل الأول
  إضافة جميلة لعرض مواضيع بشكل منسق ولطيف التصميم يحتوي فقط على أكواد سس لذلك لا داعي للقلق
• 
  إضافة أدات ذات محتوى ثابت ومخفي
  إظهار وإخفاء الأشياء في بلوجر ليس شيء صعب، كل ما نحتاجه إليه هو القليل من الفهم في C

ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

عن الكاتب : Hussam

إرشادات

تحميل الملفات

نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
• موقع : Mediafire
• موقع :file-upload
• باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
• تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
• كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
• إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.

أين تجدنا؟

بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web


كلمة الختام

في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com

أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم