آموزش ساخت دکمه انیمیشنی جذاب با CSS و JavaScript

در این مقاله آموزشی، نحوه ایجاد یک دکمه جذاب با افکت‌های انیمیشنی پیشرفته را بررسی می‌کنیم. این دکمه شامل گرادیان رنگی پویا، افکت‌های سه بعدی، ذرات متحرک و واکنش‌های تعاملی است که آن را برای استفاده در پروژه‌های مدرن وب مناسب می‌سازد.

ساختار HTML

ابتدا ساختار پایه HTML را ایجاد می‌کنیم:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>دکمه انیمیشنی جذاب</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* استایل‌ها اینجا قرار می‌گیرند */
    </style>
</head>
<body>
    <button class="magic-btn">
        <span class="btn-text">کلیک کنید</span>
        <i class="btn-icon fas fa-magic"></i>
    </button>
    
    <div class="particles" id="particles"></div>
    
    <script>
        // کدهای جاوااسکریپت اینجا قرار می‌گیرند
    </script>
</body>
</html>

توضیح استایل‌های CSS

استایل‌های پایه

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #121212;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

صفحه را به صورت flex تنظیم می‌کنیم تا دکمه در مرکز قرار گیرد
ارتفاع viewport را 100% در نظر می‌گیریم
رنگ پس‌زمینه تیره انتخاب شده است

استایل اصلی دکمه

.magic-btn {
    position: relative;
    padding: 18px 45px 18px 30px;
    font-size: 1.2rem;
    color: #fff;
    background: linear-gradient(45deg, #ff00cc, #3333ff);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

position: relative برای قرارگیری عناصر داخلی
linear-gradient برای ایجاد گرادیان رنگی
transform-style: preserve-3d برای افکت‌های سه بعدی
transition برای انیمیشن نرم تغییرات

افکت‌های هاور

.magic-btn:hover {
    transform: translateY(-5px) scale(1.05) rotateX(10deg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

هنگام هاور، دکمه کمی به بالا حرکت می‌کند
اندازه آن 5% بزرگتر می‌شود
10 درجه حول محور X می‌چرخد

افکت ذرات

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    opacity: 0;
}

.magic-btn:hover ~ .particles .particle {
    animation: particles 1s ease-out forwards;
}

@keyframes particles {
    0% { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}

ذرات سفید رنگ 4×4 پیکسلی ایجاد می‌شوند
هنگام هاور کردن روی دکمه، ذرات با انیمیشن خارج می‌شوند
مسیر حرکت ذرات به صورت تصادفی تعیین می‌شود

کد JavaScript

const particlesContainer = document.getElementById('particles');
const particlesCount = 20;

for (let i = 0; i < particlesCount; i++) {
    const particle = document.createElement('div');
    particle.classList.add('particle');
    
    const angle = Math.random() * Math.PI * 2;
    const distance = 20 + Math.random() * 30;
    const tx = Math.cos(angle) * distance;
    const ty = Math.sin(angle) * distance;
    
    particle.style.setProperty('--tx', `${tx}px`);
    particle.style.setProperty('--ty', `${ty}px`);
    particle.style.left = `${50 + Math.cos(angle) * 10}%`;
    particle.style.top = `${50 + Math.sin(angle) * 10}%`;
    particle.style.animationDelay = `${Math.random() * 0.5}s`;
    
    particlesContainer.appendChild(particle);
}

20 ذره ایجاد می‌شود
برای هر ذره مسیر حرکت تصادفی تعیین می‌شود
تاخیر انیمیشن برای هر ذره متفاوت است

کد کامل نهایی

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>دکمه انیمیشنی جذاب</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #121212;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .magic-btn {
            position: relative;
            padding: 18px 45px 18px 30px;
            font-size: 1.2rem;
            color: #fff;
            background: linear-gradient(45deg, #ff00cc, #3333ff);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            transform-style: preserve-3d;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .magic-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #3333ff, #ff00cc);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .magic-btn:hover {
            transform: translateY(-5px) scale(1.05) rotateX(10deg);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }
        
        .magic-btn:hover::before {
            opacity: 1;
        }
        
        .magic-btn:active {
            transform: translateY(0) scale(0.98);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        }
        
        .magic-btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%) scale(0);
            border-radius: 50%;
            z-index: -2;
            transition: transform 0.6s ease;
        }
        
        .magic-btn:hover::after {
            transform: translate(-50%, -50%) scale(1);
        }
        
        .btn-text {
            position: relative;
            z-index: 2;
            display: inline-block;
            transition: transform 0.3s ease;
        }
        
        .magic-btn:hover .btn-text {
            animation: bounce 0.5s ease;
        }
        
        .btn-icon {
            transition: all 0.3s ease;
        }
        
        .magic-btn:hover .btn-icon {
            transform: translateX(5px) rotate(15deg);
        }
        
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
        
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
            opacity: 0;
        }
        
        .magic-btn:hover ~ .particles .particle {
            animation: particles 1s ease-out forwards;
        }
        
        @keyframes particles {
            0% { transform: translate(0, 0); opacity: 1; }
            100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
        }
    </style>
</head>
<body>
    <button class="magic-btn">
        <span class="btn-text">کلیک کنید</span>
        <i class="btn-icon fas fa-magic"></i>
    </button>
    
    <div class="particles" id="particles"></div>
    
    <script>
        const particlesContainer = document.getElementById('particles');
        const particlesCount = 20;
        
        for (let i = 0; i < particlesCount; i++) {
            const particle = document.createElement('div');
            particle.classList.add('particle');
            
            const angle = Math.random() * Math.PI * 2;
            const distance = 20 + Math.random() * 30;
            const tx = Math.cos(angle) * distance;
            const ty = Math.sin(angle) * distance;
            
            particle.style.setProperty('--tx', `${tx}px`);
            particle.style.setProperty('--ty', `${ty}px`);
            particle.style.left = `${50 + Math.cos(angle) * 10}%`;
            particle.style.top = `${50 + Math.sin(angle) * 10}%`;
            particle.style.animationDelay = `${Math.random() * 0.5}s`;
            
            particlesContainer.appendChild(particle);
        }
    </script>
</body>
</html>

جمع‌بندی

در این آموزش، یک دکمه انیمیشنی جذاب با ترکیب CSS و JavaScript ایجاد کردیم. این دکمه شامل ویژگی‌های زیر است:

گرادیان رنگی پویا
افکت‌های سه بعدی
ذرات متحرک
واکنش به تعامل کاربر
انیمیشن‌های نرم و جذاب

تجربیات و پیشنهادات شما

آیا این آموزش برای شما مفید بود؟ چه افکت‌های دیگری را دوست دارید به این دکمه اضافه کنید؟ نظرات و پیشنهادات خود را با ما در میان بگذارید!

اگر در اجرای کدها به مشکلی برخوردید یا سوالی دارید، در بخش کامنت‌ها مطرح کنید تا راهنمایی کنم. همچنین اگر پروژه‌های جالبی با این کدها ساختید، دوست داریم ببینیم!

آموزش ساخت دکمه انیمیشنی جذاب با CSS و JavaScript

ساختار HTML

توضیح استایل‌های CSS

استایل‌های پایه

استایل اصلی دکمه

افکت‌های هاور

افکت ذرات

کد JavaScript

کد کامل نهایی

جمع‌بندی

تجربیات و پیشنهادات شما

دیدگاه خود را ثبت کنید

دیدگاهتان را بنویسید لغو پاسخ

آخرین آموزش ها

آخرین دیدگاه ها

ساختار HTML

توضیح استایل‌های CSS

استایل‌های پایه

استایل اصلی دکمه

افکت‌های هاور

افکت ذرات

کد JavaScript

کد کامل نهایی

جمع‌بندی

تجربیات و پیشنهادات شما

دیدگاه خود را ثبت کنید

دیدگاهتان را بنویسید لغو پاسخ

آخرین آموزش ها

آخرین دیدگاه ها

ابر برچسب ها