نمایش افکت تعویض متن دکمه - قبل و بعد از هاور

آموزش ساخت دکمه با افکت اسلاید متن حرفه‌ای در 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 دیدگاه /توسط
0 پاسخ

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

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *