آموزش ساخت دکمه با افکت اسلاید متن حرفه‌ای در CSS

در این مقاله، نحوه ایجاد یک دکمه جذاب با افکت اسلاید متن را به شما آموزش می‌دهم. این افکت بدون استفاده از جاوااسکریپت و تنها با HTML و CSS خالص پیاده‌سازی شده است.

موارد استفاده

  • دکمه‌های دانلود

  • دکمه‌های Call-to-Action

  • تغییر وضعیت دکمه‌ها

  • المان‌های تعاملی در رابط کاربری

<!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;
            min-height: 100vh;
            margin: 0;
            background: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, sans-serif;
        }
        
        /* استایل دکمه */
        .btn {
            position: relative;
            width: 200px;
            height: 50px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.4s;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        /* استایل متن‌های دکمه */
        .btn span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* متن اولیه */
        .btn .initial {
            opacity: 1;
        }
        
        /* متن جایگزین */
        .btn .hidden {
            opacity: 0;
        }
        
        /* افکت هنگام هاور */
        .btn:hover {
            background: #45a049;
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }
        
        .btn:hover .initial {
            opacity: 0;
            transform: translate(-150%, -50%);
        }
        
        .btn:hover .hidden {
            opacity: 1;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <button class="btn">
        <span class="initial">همین حالا شروع کنید</span>
        <span class="hidden">دانلود <i class="fas fa-download"></i></span>
    </button>
</body>
</html>

توضیح گام به گام

1. ساختار HTML

  • از یک تگ <button> به عنوان پایه استفاده می‌کنیم

  • داخل دکمه دو <span> قرار می‌دهیم:

    • متن اولیه (initial)

    • متن جایگزین (hidden)

2. استایل‌دهی پایه

  • دکمه را با position: relative آماده می‌کنیم

  • متن‌ها را با position: absolute در وسط دکمه قرار می‌دهیم

  • از transform: translate(-50%, -50%) برای تراز دقیق مرکز استفاده می‌کنیم

3. افکت انتقال

  • برای هر دو متن transition تعریف می‌کنیم

  • از opacity برای محو کردن/ظاهر کردن استفاده می‌کنیم

  • با transform موقعیت متن‌ها را تغییر می‌دهیم

4. بهبود ظاهری

  • اضافه کردن سایه با box-shadow

  • تغییر رنگ پس‌زمینه هنگام هاور

  • استفاده از منحنی انتقال (cubic-bezier) برای حرکت نرم‌تر

نکات پیشرفته

1. تغییر جهت افکت

برای تغییر جهت حرکت متن‌ها، مقادیر transform را می‌توانید تغییر دهید.

2. اضافه کردن تاخیر

می‌توانید با transition-delay بین افکت‌ها تاخیر ایجاد کنید.

3. استفاده از آیکون‌های مختلف

به راحتی می‌توانید کلاس آیکون Font Awesome را تغییر دهید.

جمع‌بندی

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

 

امیدوارم این آموزش برای شما مفید بوده باشد! نظرات خود را در کامنت ها با ما به اشتراک بگذارید.

/0 دیدگاه /توسط

آموزش ساخت کارت محصول ریسپانسیو با Bootstrap 5 + سورس کد رایگان

در این آموزش از سایت Highlearn یاد می‌گیریم چطور با استفاده از Bootstrap 5 یک کارت محصول حرفه‌ای و کاملاً ریسپانسیو بسازیم.
این کارت محصول شامل تصویر، نام محصول، رنگ‌بندی، قیمت فعلی و قبلی، امتیاز کاربران، موجودی انبار و دکمه افزودن به سبد خرید است.

این پروژه برای طراحان وب، برنامه‌نویسان فرانت‌اند و هر کسی که می‌خواهد بخش محصولات سایت خود را زیبا و مدرن طراحی کند بسیار کاربردی است.

مراحل ساخت کارت محصول با Bootstrap 5

۱. آماده‌سازی محیط پروژه

ابتدا یک فایل HTML بسازید و کتابخانه‌های مورد نیاز را اضافه کنید:

  • Bootstrap 5 برای استایل‌دهی

  • Font Awesome برای آیکون‌ها

  • فونت فارسی (مثل Vazir)

 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet">

۲. ساختار HTML کارت محصول

درون <body> یک ساختار کارت بسازید که شامل تصویر محصول و اطلاعات آن باشد:

<div class="card product-card">
    <div class="product-img-container">
        <div class="color-options">
            <span class="color-option" style="background-color: #000"></span>
            <span class="color-option" style="background-color: #fff"></span>
            <span class="color-option" style="background-color: rgb(153, 38, 38)"></span>
            <span class="color-option" style="background-color: rgb(18, 112, 189)"></span>
        </div>
        <img src="https://nityasoul.com/wp-content/uploads/2024/03/u.webp" class="product-img"/>
    </div>
    <div class="card-body">
        <h5 class="product-title">تی شرت مردانه آستین کوتاه طرح دار</h5>
        <div class="text-warning mb-2">
            <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
            <i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
            <span class="text-muted small">(4.5)</span>
        </div>
        <div class="mb-2">
            <span class="text-success current-price">400.000 تومان</span>
            <span class="text-muted small old-price">450.000 تومان</span>
        </div>
        <div class="text-danger small mb-2">
            <i class="fas fa-box-open"></i> موجود در انبار
        </div>
        <button class="btn btn-success add-to-cart">
            <i class="fas fa-shopping-cart"></i> افزودن به سبد خرید
        </button>
    </div>
</div>

۳. استایل‌دهی سفارشی (CSS)

برای زیباتر شدن کارت محصول، چند استایل سفارشی اضافه کنید:

body {
    font-family: 'Vazir';
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.product-card {
    max-width: 300px;
    border: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09);
}
.product-img-container {
    height: 300px;
    position: relative;
}
.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.color-options {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 10px;
    top: 10px;
    gap: 6px;
}
.color-option {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.product-title {
    font-size: 0.95rem;
    font-weight: bold;
}
.current-price {
    font-weight: bold;
}
.old-price {
    text-decoration: line-through;
}
.add-to-cart {
    width: 100%;
}

ویدئوی آموزشی

اگر دوست دارید این آموزش را به‌صورت ویدئویی و کامل مشاهده کنید، این ویدئو را در کانال یوتیوب ما ببینید:

🎥 مشاهده آموزش در یوتیوب

سورس کد کامل پروژه

در ادامه می‌توانید سورس کد کامل این پروژه را مشاهده کرده و مستقیماً در سایت خود استفاده کنید.

<!DOCTYPE html>
<html dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>product card</title>
  
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        body{
            font-family: 'Vazir';
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .product-card{
            max-width: 300px;
            border: none;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09);
        }

        .product-img-container{
            height: 300px;
        }

        .product-img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .color-options{
            display: flex;
            flex-direction: column;
            position: absolute;
            left: 10px;
            top: 10px;
            gap: 6px;
        }
        .color-option{
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .product-title{
            font-size: 0.95rem;
            font-weight: bold;
        }

        .current-price{
            font-weight: bold;
        }

        .old-price{
            text-decoration: line-through;
        }

        .add-to-cart{
            width: 100%;
        }
    </style>

</head>
<body>

    <div class="card product-card">

        <div class="product-img-container">

            <div class="color-options">
                <span class="color-option" style="background-color: #000"> </span>
                <span class="color-option" style="background-color: #fff"> </span>
                <span class="color-option" style="background-color: rgb(153, 38, 38)"> </span>
                <span class="color-option" style="background-color: rgb(18, 112, 189)"> </span>
            </div>


            <img src="https://nityasoul.com/wp-content/uploads/2024/03/u.webp" class="product-img"/>
        </div>

        <div class="card-body">


            <h5 class="product-title"> تی شرت مردانه آستین کوتاه طرح دار </h5>


            <div class="text-warning mb-2">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star-half-alt"></i>
                <span class="text-muted small"> (4.5) </span>
            </div>

            <div class="mb-2">
                <span class="text-success current-price">
                        400.000  تومان 
                </span>
                <span class="text-muted small old-price">
                    450.000  تومان 
                </span>
            </div>

            <div class="text-danger small mb-2">
                <i class="fas fa-box-open"></i>
                موجود در انبار
            </div>


       <button class="btn btn-success add-to-cart">
        <i class="fas fa-shopping-cart"></i>   
        افزودن به سبد خرید 
       </button>

        </div>

    </div>
     
</body>
</html>

نظر شما؟

اگر این آموزش برایتان مفید بود، لطفاً در بخش نظرات همین صفحه تجربه خود را بنویسید.
شما چه ایده‌ای برای بهبود این کارت محصول دارید؟

/0 دیدگاه /توسط

آموزش ساخت دکمه انیمیشنی جذاب با 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 ایجاد کردیم. این دکمه شامل ویژگی‌های زیر است:

  • گرادیان رنگی پویا

  • افکت‌های سه بعدی

  • ذرات متحرک

  • واکنش به تعامل کاربر

  • انیمیشن‌های نرم و جذاب

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

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

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

 

 

/0 دیدگاه /توسط

ساخت لوودر دایره‌ای زیبا با CSS — آموزش گام به گام + کد کامل

,

در این مقاله، یک انیمیشن لوودینگ (Loading) زیبا و حرفه‌ای شبیه به لوودینگ‌های مدرن (مانند Google) را با استفاده از فقط HTML و CSS خواهیم ساخت. این لوودر از چند نقطه کوچک تشکیل شده که به صورت دایره‌ای دور یک محور می‌چرخند و تدریجاً ظاهر و ناپدید می‌شوند — همراه با متن “Loading…” که با افکت fade می‌درخشد.

این مقاله مناسب توسعه‌دهندگان وب مبتدی و متوسط است و تمام مراحل را گام به گام و خط به خط توضیح می‌دهد.

هدف نهایی چیست؟

در پایان این آموزش، یک لوودر زیبا خواهید داشت که:

  • دقیقاً در وسط صفحه قرار دارد
  • شامل ۵ نقطه با اندازه و شفافیت متفاوت است که به صورت دایره‌ای می‌چرخند
  • متن “Loading…” زیر آن با افکت ناپدید شدن مداوم نمایش داده می‌شود
  • کاملاً ریسپانسیو و بدون نیاز به جاوااسکریپت است

ساختار HTML

ابتدا، ساختار پایه HTML را می‌سازیم:

<div class="loader">
    <div class="dots-container">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
    <div class="loading-text">Loading...</div>
</div>

توضیح ساختار:

  • loader: کانتینر اصلی که شامل دایره نقطه‌ها و متن است.
  • dots-container: یک کادر 120×120 پیکسلی که نقطه‌ها داخل آن می‌چرخند.
  • dot: هر یک از ۵ نقطه کوچک که انیمیشن می‌گیرند.
  • loading-text: متنی که زیر دایره نمایش داده می‌شود.

استایل‌دهی با CSS

حالا به سراغ CSS می‌رویم. تمام استایل‌ها را به ترتیب توضیح می‌دهیم.

۱. تنظیمات کلی (* و body)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
    overflow: hidden;
}
  • *: تمام عناصر را ریست می‌کند (حذف حاشیه و پدینگ پیش‌فرض).
  • body: با استفاده از flexbox، محتوا را دقیقاً در وسط صفحه قرار می‌دهد.
  • min-height: 100vh: اطمینان از پوشش تمام ارتفاع صفحه.
  • overflow: hidden: جلوگیری از اسکرول ناخواسته به دلیل انیمیشن.

۲. کانتینر اصلی لوودر

.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
  • flex-direction: column: المان‌ها را به صورت عمودی چیده می‌شود (اول دایره، بعد متن).
  • align-items: center: محتوا را در مرکز افقی نگه می‌دارد.
  • gap: 20px: فاصله بین دایره و متن.

۳. کانتینر نقطه‌ها

 

.dots-container {
    position: relative;
    width: 120px;
    height: 120px;
}
  • position: relative: نقطه مرجع برای موقعیت‌یابی dotها.
  • ابعاد 120×120px برای ایجاد فضای کافی جهت چرخش نقطه‌ها.

۴. نقطه‌های متحرک

.dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: #4285f4;
    border-radius: 50%;
    transform-origin: 60px 60px;
    animation: spin 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

توضیحات مهم:

  • position: absolute: نقطه‌ها نسبت به dots-container جابجا می‌شوند.
  • top: 50%; left: 50%: نقطه شروع هر dot در مرکز کانتینر است.
  • border-radius: 50%: تبدیل به دایره.
  • transform-origin: 60px 60px: مرکز چرخش را روی مرکز کانتینر تنظیم می‌کند (چون 120px / 2 = 60px).
  • animation: spin ...: انیمیشن اصلی چرخش را اعمال می‌کند.

۵. تنظیم اندازه و رنگ هر نقطه

.dot:nth-child(1) {
    animation-delay: -0.1s;
    background-color: rgba(66, 133, 244, 0.3);
    width: 6px;
    height: 6px;
}

.dot:nth-child(2) {
    animation-delay: -0.2s;
    background-color: rgba(66, 133, 244, 0.5);
    width: 7px;
    height: 7px;
}

.dot:nth-child(3) {
    animation-delay: -0.3s;
    background-color: rgba(66, 133, 244, 0.7);
    width: 8px;
    height: 8px;
}

.dot:nth-child(4) {
    animation-delay: -0.4s;
    background-color: rgba(66, 133, 244, 0.9);
    width: 9px;
    height: 9px;
}

.dot:nth-child(5) {
    animation-delay: -0.5s;
    width: 10px;
    height: 10px;
}
  • با استفاده از :nth-child، به هر نقطه اندازه و شفافیت متفاوتی می‌دهیم.
  • animation-delay باعث می‌شود نقطه‌ها یکی پس از دیگری وارد چرخش شوند و افکت موج‌وار ایجاد شود.
  • رنگ اصلی #4285f4 همان رنگ آبی معروف Google است.

۶. انیمیشن چرخش (@keyframes spin)

 

@keyframes spin {
    0% {
        transform: rotate(0deg) translate(50px) rotate(0deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: rotate(360deg) translate(50px) rotate(-360deg);
        opacity: 0;
    }
}

چطور کار می‌کند؟

  • translate(50px): هر نقطه را 50px از مرکز دور می‌کند (شعاع دایره).
  • rotate(360deg) روی کانتینر: کل نقطه را به دور مرکز بچرخاند.
  • rotate(-360deg) روی خود نقطه: جهت نقطه را ثابت نگه می‌دارد (اگر نباشد، نقطه هم می‌چرخد!).
  • opacity: نقطه در ابتدا و انتهای چرخش ناپدید می‌شود و در وسط پررنگ می‌شود.

۷. انیمیشن متن “Loading…”

.loading-text {
    color: #4285f4;
    font-size: 18px;
    animation: fade 1.5s ease-in-out infinite;
}

@keyframes fade {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
  • fade: متن را به صورت مداوم بین شفافیت ۰.۶ و ۱ تغییر می‌دهد.
  • ease-in-out: حرکت نرم و طبیعی.

کد نهایی کامل

در اینجا کد کامل و آماده استفاده را داریم:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }

        .loader {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .dots-container {
            position: relative;
            width: 120px;
            height: 120px;
        }

        .dot {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 8px;
            background-color: #4285f4;
            border-radius: 50%;
            transform-origin: 60px 60px;
            animation: spin 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
        }

        .dot:nth-child(1) {
            animation-delay: -0.1s;
            background-color: rgba(66, 133, 244, 0.3);
            width: 6px;
            height: 6px;
        }

        .dot:nth-child(2) {
            animation-delay: -0.2s;
            background-color: rgba(66, 133, 244, 0.5);
            width: 7px;
            height: 7px;
        }

        .dot:nth-child(3) {
            animation-delay: -0.3s;
            background-color: rgba(66, 133, 244, 0.7);
            width: 8px;
            height: 8px;
        }

        .dot:nth-child(4) {
            animation-delay: -0.4s;
            background-color: rgba(66, 133, 244, 0.9);
            width: 9px;
            height: 9px;
        }

        .dot:nth-child(5) {
            animation-delay: -0.5s;
            width: 10px;
            height: 10px;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg) translate(50px) rotate(0deg);
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: rotate(360deg) translate(50px) rotate(-360deg);
                opacity: 0;
            }
        }

        .loading-text {
            color: #4285f4;
            font-size: 18px;
            animation: fade 1.5s ease-in-out infinite;
        }

        @keyframes fade {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="loader">
        <div class="dots-container">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="loading-text">Loading...</div>
    </div>
</body>
</html>

نتیجه‌گیری

در این مقاله، یک لوودر زیبا و حرفه‌ای را با استفاده از فقط HTML و CSS ساختیم. بدون نیاز به جاوااسکریپت، توانستیم یک انیمیشن پویا، مرکزی و ریسپانسیو بسازیم که می‌تواند در هر سایت، پنل مدیریت یا اپلیکیشن وب استفاده شود.

اگر این مقاله را دوست داشتید، اشتراک‌گذاری کنید و در کامنت‌ها پیشنهادات خود را بگویید!

/0 دیدگاه /توسط

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

,

در این مقاله جامع، نحوه ایجاد یک دکمه انیمیشنی حرفه‌ای با افکت تبدیل حرف “A” به آیکون پلی را به صورت گام به گام آموزش می‌دهیم.

مقدمه

دکمه‌های تعاملی با انیمیشن‌های ظریف می‌توانند تجربه کاربری را به شدت بهبود بخشند. در این آموزش، شما یاد خواهید گرفت چگونه با استفاده از CSS خالص، یک دکمه پلی با افکت تبدیل متن به آیکون ایجاد کنید.

ساختار HTML

<button class="play-btn">
    <span class="btn-content">
        <span class="letter">P</span>
        <span class="letter">L</span>
        <span class="letter-a-container">
            <span class="letter-a">A</span>
            <span class="play-icon"></span>
        </span>
        <span class="letter">Y</span>
    </span>
</button>

توضیحات ساختار:

  1. دکمه اصلی: المان <button> با کلاس play-btn که به عنوان ظرف اصلی عمل می‌کند.

  2. محتوای دکمه: <span> با کلاس btn-content که حروف را سازماندهی می‌کند.

  3. حروف جداگانه: هر حرف در یک <span> با کلاس letter قرار گرفته است.

  4. حرف A و آیکون: حرف “A” و آیکون پلی در یک container مخصوص (letter-a-container) قرار دارند.

استایل‌دهی با CSS

استایل پایه دکمه:

.play-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    background: linear-gradient(45deg, #ff3d77, #ff9d00);
    color: white;
    font-size: 24px;
    font-weight: bold;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

نکات مهم:

  • display: inline-flex برای ترازبندی دقیق محتوا

  • overflow: hidden برای محدود کردن افکت‌های انیمیشن

  • transition برای ایجاد تغییرات نرم

افکت‌های hover و active:

.play-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.play-btn:active {
    transform: translateY(1px);
}

استایل حروف و فاصله‌گذاری:

.letter {
    display: inline-block;
    transition: all 0.3s ease;
    position: relative;
}

.letter:not(:last-child) {
    margin-right: 4px;
}

نکته: این کد فاصله یکسان بین همه حروف ایجاد می‌کند.

انیمیشن تبدیل حرف A به آیکون:

.letter-a-container {
    position: relative;
    width: 24px;
    display: inline-flex;
    justify-content: center;
}

.letter-a {
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.play-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-left: 15px solid white;
    border-bottom: 9px solid transparent;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    opacity: 0;
}

.play-btn:hover .letter-a {
    opacity: 0;
    transform: scale(0);
}

.play-btn:hover .play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

نکات فنی:

  1. آیکون پلی با تکنیک border مثلث ایجاد شده است.

  2. از transform و opacity برای ایجاد انیمیشن نرم استفاده شده.

  3. cubic-bezier برای زمان‌بندی طبیعی‌تر انیمیشن‌ها استفاده شده.

کد کامل

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Play Button</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            font-family: 'Arial', sans-serif;
            margin: 0;
        }
        
        .play-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 15px 30px;
            background: linear-gradient(45deg, #ff3d77, #ff9d00);
            color: white;
            font-size: 24px;
            font-weight: bold;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        
        .play-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }
        
        .play-btn:active {
            transform: translateY(1px);
        }
        
        .btn-content {
            display: flex;
            align-items: center;
            position: relative;
        }
        
        .letter {
            display: inline-block;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .letter:not(:last-child) {
            margin-right: 4px;
        }
        
        .letter-a-container {
            position: relative;
            width: 24px;
            display: inline-flex;
            justify-content: center;
        }
        
        .letter-a {
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        
        .play-icon {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 0;
            height: 0;
            border-top: 9px solid transparent;
            border-left: 15px solid white;
            border-bottom: 9px solid transparent;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            opacity: 0;
        }
        
        .play-btn:hover .letter-a {
            opacity: 0;
            transform: scale(0);
        }
        
        .play-btn:hover .play-icon {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    </style>
</head>
<body>
    <button class="play-btn">
        <span class="btn-content">
            <span class="letter">P</span>
            <span class="letter">L</span>
            <span class="letter-a-container">
                <span class="letter-a">A</span>
                <span class="play-icon"></span>
            </span>
            <span class="letter">Y</span>
        </span>
    </button>
</body>
</html>

جمع‌بندی

در این آموزش یاد گرفتید:

  1. چگونه با CSS یک دکمه انیمیشنی ایجاد کنید

  2. تکنیک تبدیل متن به آیکون با hover

  3. ایجاد مثلث با استفاده از border در CSS

  4. کنترل دقیق فاصله‌ها و ترازبندی عناصر

  5. استفاده از transition و transform برای انیمیشن‌های نرم

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

/0 دیدگاه /توسط