إضافة زر متوهج مع انعكاس في بلوجر

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

ما هو الزر المتوهج؟

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

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

يعمل الزر المتوهج على إزالة الزاوية الحادة للواجهة وجعل الزوايا متوهجة للحصول على مظهر لطيف وتصميم مبدع.

فوائد الأزرار المضيئة :-

• مظهر نظيف ومُحسَّن.
• المظهر العام لطيف.
• تصميم ذو تأثير متوهج.
• قم بتغيير الأزرار القديمة لديك إلى هذا النمط الجديد. 
• يضيف إحساسًا ثلاثي الأبعاد أثناء التمرير فوق الأزرار.

كيفية إضافة زر متوهج مع انعكاس في بلوجر؟

هناك خطوة واحدة فقط عليك القيام بها وهي إضافة CSS للزر. بعد ذلك يمكنك استخدام الزر على مدونتك بشكل مثالي.

الخطوة 1: تسجيل الدخول إلى لوحة تحكم Blogger الخاصة بك

الخطوة 2: انتقل إلى السمات

الخطوة 3: انقر على سهم القائمة المنسدلة وحدد تحرير HTML

الخطوة 4: الآن ابحث عن ]]>  أو </body> وقم بلصق CSS التالي فوقه

يمكنك استخدام  CSS Minifier الخاص بنا  لتقليل حجم CSS هذا وجعله أخف وزنًا

/* Glowing Button Style by FreemiumTech */
<style type="text/css">
  but{position:relative;display:inline-block;padding:10px 10px;margin:40px;color:#03e9f4;text-decoration:none;text-transform:uppercase;transition:0.5s;letter-spacing:4px;overflow:hidden}but:hover{background:#03e9f4;color:#050801;box-shadow:0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 200px #03e9f4;-webkit-box-reflect:below 1px linear-gradient(transparent,#0005)}but span{position:absolute;display:block}but span:nth-child(1){top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#03e9f4);animation:animate1 1.6s linear infinite}@keyframes animate1{0%{left:-100%}50%,100%{left:100%}}but span:nth-child(2){top:-100%;right:0;width:2px;height:100%;background:linear-gradient(180deg,transparent,#03e9f4);animation:animate2 1.6s linear infinite;animation-delay:0.40s}@keyframes animate2{0%{top:-100%}50%,100%{top:100%}}but span:nth-child(3){bottom:0;right:0;width:100%;height:2px;background:linear-gradient(270deg,transparent,#03e9f4);animation:animate3 1.6s linear infinite;animation-delay:0.80s}@keyframes animate3{0%{right:-100%}50%,100%{right:100%}}but span:nth-child(4){bottom:-100%;left:0;width:2px;height:100%;background:linear-gradient(360deg,transparent,#03e9f4);animation:animate4 1.6s linear infinite;animation-delay:1.20s}@keyframes animate4{0%{bottom:-100%}50%,100%{bottom:100%}}
</style>

الخطوة 5: أضف الآن أكواد الزر أدناه في منشورك/صفحتك الخاصة

فيما يلي عرض توضيحي مع أكواد لاستخدام الزر. انسخ الكود من الأزرار الموجودة بالأسفل عندما تريد استخدام أي زر في مدونتك.

أضف روابطك إلى #

 القربعي كنز المعلومات 

 <center>
  <but onclick="window.open('https://FreemiumTech.blogspot.com/?m=1')" style="filter: hue-rotate(110deg)" target="blank">
    <span></span>
    <span></span> 
    <span></span>
    <span></span>
    Freemium Tech
  </but>
</center> 

القربعي كنز المعلومات 

 <center>
  <but onclick="window.open('https://freemiumtech.blogspot.com/?m=1')" style="filter: hue-rotate(190deg)" target="blank">
    <span></span>
    <span></span> 
    <span></span>
    <span></span>
    Freemium Tech
  </but>
</center> 

االقربعي كنز المعلومات 

 <center>
  <but onclick="window.open('https://freemiumtech.blogspot.com/?m=1')" target="blank">
    <span></span>
    <span></span> 
    <span></span>
    <span></span>
    Freemium Tech
  </but>
</center> 

القربعي كنز المعلومات 

 <center>
  <but onclick="window.open('https://freemiumtech.blogspot.com/?m=1')" style="filter: hue-rotate(270deg)" target="blank">
    <span></span>
    <span></span> 
    <span></span>
    <span></span>
    Freemium Tech
  </but>
</center> 

خاتمة

في هذه التدوينة قمت بعمل برنامج تعليمي حول 

كيفية إضافة زر متوهج مع انعكاس في بلوجر؟  مما يعطي إحساسًا بالرسوم المتحركة الملونة أثناء التمرير. آمل أن يكون قد نال إعجابك ويرجى مشاركته مع أصدقائك ومتابعة مدونتنا لمزيد من المعلومات.

إذا واجهت أي مشاكل في هذا الكود أو كان لديك أي أسئلة فلا تتردد في سؤالي في قسم التعليقات

الانتقال إلى الرابط المطلوب

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

مصمم

اديب القربعي كنز المعلومات

اضافات اكواد قوالب تحسين محركات البحث مدونات بلوجر