آموزش ساخت دکمه اشتراک‌گذاری تعاملی با CSS و HTML

,

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

پیش‌نمایش نهایی

قبل از شروع، بیایید ببینیم چه چیزی می‌سازیم:

  • یک دکمه با طراحی مدرن و گوشه‌های گرد

  • افکت تبدیل هنگام hover به سه دایره اجتماعی

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

  • کاملاً ریسپانسیو

 

کد کامل

<!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;
            margin: 0;
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .share-container {
            text-align: center;
            margin: 2rem;
        }
        
        .share-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: #00CED1;
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            cursor: pointer;
            font-size: 16px;
            border: none;
            outline: none;
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            overflow: hidden;
            width: 140px;
            height: 50px;
            box-shadow: 0 4px 8px rgba(0, 206, 209, 0.3);
        }
        
        .share-btn i {
            margin-right: 8px;
            transition: transform 0.3s ease;
        }
        
        .social-circles {
            position: absolute;
            display: flex;
            width: 100%;
            justify-content: space-around;
            opacity: 0;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.7);
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }
        
        .social-circle {
            width: 40px;
            height: 40px;
            background-color: #00CED1;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .social-circle:hover {
            transform: scale(1.1) translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .share-btn:hover {
            background-color: transparent;
            box-shadow: none;
        }
        
        .share-btn:hover .btn-content {
            opacity: 0;
            transform: translateY(-30px);
        }
        
        .share-btn:hover .social-circles {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        
        .btn-content {
            display: flex;
            align-items: center;
            transition: all 0.4s ease;
        }
    </style>
</head>
<body>
    <div class="share-container">
        <button class="share-btn">
            <span class="btn-content">
                اشتراک‌گذاری <i class="fas fa-share-alt"></i>
            </span>
            <div class="social-circles">
                <div class="social-circle">
                    <i class="fab fa-instagram"></i>
                </div>
                <div class="social-circle">
                    <i class="fab fa-twitter"></i>
                </div>
                <div class="social-circle">
                    <i class="fab fa-telegram"></i>
                </div>
            </div>
        </button>
    </div>
</body>
</html>

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

1. ساختار HTML

ساختار اصلی شامل این بخش‌هاست:

  • بدنه اصلی: تگ <body> که محتوا را در مرکز صفحه قرار می‌دهد

  • کنتینر دکمه: div با کلاس share-container برای قرارگیری دکمه

  • دکمه اصلی: با کلاس share-btn که دو بخش دارد:

    • محتوای اصلی دکمه (btn-content)

    • دایره‌های اجتماعی (social-circles)

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

بخش body:

  • از flexbox برای مرکز کردن عمودی و افقی استفاده شده

  • ارتفاع 100vh برای پر کردن کل ارتفاع صفحه

  • فونت و پس‌زمینه مناسب تنظیم شده

دکمه اصلی:

  • رنگ فیروزه‌ای (#00CED1) با سایه مناسب

  • گوشه‌های گرد با border-radius

  • padding مناسب برای ظاهر زیبا

  • transition برای انیمیشن نرم

دایره‌های اجتماعی:

  • در حالت عادی مخفی هستند (opacity: 0)

  • با hover روی دکمه ظاهر می‌شوند

  • هر دایره دارای افکت hover جداگانه است

  • از transform برای انیمیشن‌های جذاب استفاده شده

3. افکت hover

هنگام hover روی دکمه:

  1. پس‌زمینه دکمه محو می‌شود

  2. محتوای اصلی (متن و آیکون) به بالا حرکت کرده و محو می‌شود

  3. دایره‌های اجتماعی با انیمیشن ظاهر می‌شوند

  4. هر دایره هنگام hover جداگانه واکنش نشان می‌دهد

4. نکات فنی مهم

  1. ترکیب transformها: استفاده همزمان از translate و scale برای انیمیشن‌های طبیعی‌تر

  2. cubic-bezier: برای ایجاد انیمیشن‌های غیرخطی و جذاب‌تر

  3. ترتیب transitionها: تنظیم زمان‌های مختلف برای ایجاد افکت‌های لایه‌ای

  4. سازگاری مرورگرها: کد با تمام مرورگرهای مدرن کار می‌کند

چگونه این کد را سفارشی کنیم؟

  1. تغییر رنگ: مقدار #00CED1 را به رنگ مورد نظر خود تغییر دهید

  2. تغییر آیکون‌ها: کلاس‌های Font Awesome را به آیکون‌های دلخواه تغییر دهید

  3. تغییر اندازه: مقادیر width و height را برای اندازه‌های مختلف تنظیم کنید

  4. اضافه کردن لینک: به هر دایره یک لینک اشتراک‌گذاری واقعی اضافه کنید

جمع‌بندی

این دکمه اشتراک‌گذاری یک راه حل زیبا و کاربردی برای افزایش تعامل کاربران است. با استفاده از تکنیک‌های مدرن CSS توانسته‌ایم یک اثر بصری جذاب ایجاد کنیم که هم از نظر عملکردی و هم از نظر زیبایی‌شناسی در سطح بالایی قرار دارد.

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

 

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

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

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

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

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

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

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