تصميم زر جذاب بمؤثرات سائلة – Liquid Button

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

🔹 مميزات الزر:

1. تصميم عصري وجذاب
   تأثيرات سائلة ومضيئة تجعل الزر يبدو وكأنه ينبض بالحياة.

2. حركة سلسة عند المرور Hover
   عند تمرير الماوس على الزر، يكبر قليلًا بطريقة سلسة لإضفاء تأثير ديناميكي.

3. تأثيرات ضوئية متقدمة
   حركة خلفية ناعمة تشبه الموجات. شعاع ضوء متحرك يضيف لمسة احترافية للزر

4. سهل التخصيص
   يمكن تعديل: الألوان (gradient) / حجم الزر / نص الزر / سرعة وحركة التأثيرات.

5. متوافق مع جميع المتصفحات
   يعمل بشكل ممتاز على الكمبيوتر والموبايل والتابلت.

🔹 طريقة الاستخدام

CSS (تضعه في ملف style.css أو داخل <style>):

body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: #0d0d0d; font-family: "Poppins",sans-serif; } .liquid-btn { position: relative; padding: 18px 50px; font-size: 22px; color: #fff; border: none; cursor: pointer; border-radius: 50px; overflow: hidden; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; background: linear-gradient(135deg, red, blue); box-shadow: 0 0 20px rgba(79, 172, 254, 0.8), 0 0 40px rgba(0, 242, 254, 0.6); transition: transform 0.2s ease; } .liquid-btn:hover { transform: scale(1.05); } .liquid-btn::before, .liquid-btn::after { content: ""; position: absolute; left: -50%; width: 200%; height: 300%; background: radial-gradient(circle, rgba(255,255,255,0.25) 20%, transparent 70%); animation: wave 6s linear infinite; border-radius: 40%; z-index: 1; } .liquid-btn::after { animation-duration: 8s; opacity: 0.6; } .shine { position: absolute; top: 0; left: -75%; width: 50%; background: linear-gradient(120deg, rgba(255,255,255,0.3) 0%, transparent 60%); transform: skewX(-25deg); animation: shineMove 4s infinite; z-index: 2; } @keyframes wave { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10%) rotate(180deg); } 100% { transform: translateY(0) rotate(360deg); } } @keyframes shineMove { 0% { left: -75%; } 100% { left: 125%; } } نسخ الكود

HTML (تضعه داخل الصفحة أو المقال):

<button class='liquid-btn'> <span class='shine'></span> Click Me </button> نسخ الكود

لاحظ: الـ <span class='shine'></span> مسؤول عن تأثير الضوء المتحرك على الزر.