دکمه کهکشانی با انیمیشن چرخشی | HTML, CSS خالص

معرفی سورس

یک دکمه فوق‌العاده جذاب و چشم‌نواز با افکت کهکشانی (Galaxy Effect) که تنها با HTML و CSS خالص پیاده‌سازی شده است. پس‌زمینه‌ای تیره و عمیق، همراه با یک گرادیانت مخروطی چرخان و فیلتر blur، حسی از یک کهکشان در حال چرخش را القا می‌کند. این دکمه برای دعوت به اقدام (Call to Action)، بخش‌های ویژه و یا هر المان تعاملی که نیاز به جلب توجه دارد، ایده‌آل است.

🎯 ویژگی‌ها

• ✅ انیمیشن چرخشی بی‌نهایت و نرم (360 درجه)
• ✅ افکت blur روی گرادیانت برای ایجاد حس کهکشانی
• ✅ تغییر استایل در حالت Hover (افزایش شفافیت و blur)
• ✅ طراحی کاملاً واکنش‌گرا و مدرن
• ✅ استفاده از تکنیک‌های پیشرفته CSS (conic-gradient، radial-gradient، filter)
• ✅ کد بسیار سبک و بدون نیاز به JavaScript
• ✅ قابل استفاده در هر بخش از وب‌سایت (دکمه‌های CTA، بخش‌های ویژه)

🎨 طراحی ظاهری

دکمه با گوشه‌های کاملاً گرد، پس‌زمینه‌ای تیره با گرادیانت شعاعی و یک شبه‌عنصر ::before که یک گرادیانت مخروطی رنگارنگ (صورتی، آبی، طلایی) را به صورت چرخشی نمایش می‌دهد. فیلتر blur(40px) باعث می‌شود رنگ‌ها به صورت نرم و رویایی در هم ترکیب شوند. در حالت هاور، افکت قوی‌تر می‌شود.

📦 محتویات سورس

• index.html – ساختار دکمه
• style.css – تمام استایل‌ها و انیمیشن‌های کهکشانی

🚀 نحوه استفاده

1. دو فایل را در یک پوشه قرار دهید.
2. فایل index.html را با مرورگر باز کنید و از افکت لذت ببرید.
3. برای استفاده در پروژه خود، کدهای CSS را به استایل‌شیت خود اضافه کنید و کلاس galaxy را به هر دکمه‌ای بدهید.

📋 مشخصات فنی

• تکنولوژی: HTML5, CSS3
• انیمیشن: keyframes spin (چرخش 360 درجه)
• توابع گرادیانت: radial-gradient, conic-gradient
• فیلتر: blur
• وابستگی: صفر (JavaScript استفاده نشده)
• تعداد فایل: ۲
• حجم کلی: بسیار کم

🎁 این سورس برای چه کسانی مناسب است؟

• طراحان وب که به دنبال المان‌های بصری خلاقانه و متفاوت هستند
• افرادی که می‌خواهند با قدرت CSS در ایجاد انیمیشن‌های پیچیده آشنا شوند
• پروژه‌هایی که نیاز به دکمه‌های جلب توجه کننده برای نرخ تبدیل بالاتر دارند
• علاقه‌مندان به طراحی‌های فانتزی و فضایی

💡 چرا این سورس؟

• 🔹 افکت بصری منحصربه‌فرد و چشم نواز
• 🔹 استفاده خلاقانه از قابلیت‌های مدرن CSS
• 🔹 کد بسیار تمیز و کوتاه
• 🔹 کاملاً قابل شخصی‌سازی (رنگ‌ها، سرعت چرخش، اندازه)
• 🔹 بدون نیاز به هیچ فایل گرافیکی خارجی