چگونه در گوگل رتبه یک شویم؟ روش‌های عملی و اثبات‌شده

رتبه‌بندی در صفحه اول گوگل، به‌ویژه در جایگاه اول، رویای هر وبمستر، تولیدکننده محتوا و کسب‌وکار آنلاین است. اما واقعیت این است که رسیدن به رتبه اول گوگل فقط با آرزو محقق نمی‌شود. این موفقیت نیازمند برنامه‌ریزی دقیق، دانش تخصصی از سئو (SEO)، و اجرای استراتژی‌های عملی و اثبات‌شده است.

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

چرا رتبه اول گوگل اهمیت دارد؟

وقتی کاربران یک جستجو در گوگل انجام می‌دهند، بیشترین کلیک‌ها به نتایج اول صفحه می‌رسد. طبق تحقیقات مختلف، بیش از ۳۰ درصد از کلیک‌ها به رتبه اول گوگل اختصاص می‌یابد و این رقم برای رتبه‌های بعدی به سرعت کاهش می‌یابد. به عبارت دیگر، اگر شما در رتبه دهم قرار داشته باشید، شانس دیده شدن شما نزدیک به صفر است.

رتبه اول گوگل فقط به معنای ترافیک بیشتر نیست، بلکه به معنای اعتماد بیشتر کاربران نیز هست. بسیاری از کاربران فکر می‌کنند که وبسایت‌هایی که در بالای نتایج گوگل ظاهر می‌شوند، معتبرتر و حرفه‌ای‌تر هستند. این اعتبار نه تنها باعث افزایش بازدید می‌شود، بلکه نرخ تبدیل (Conversion Rate) را نیز به طور چشمگیری افزایش می‌دهد.

درک الگوریتم گوگل: اولویت‌های جدید

قبل از اینکه بخواهیم به رتبه اول برسیم، باید بفهمیم که گوگل چه چیزی را اولویت می‌دهد. در گذشته، سئو عمدتاً حول محور کلمات کلیدی و لینک‌سازی بود، اما امروزه الگوریتم گوگل بسیار پیچیده‌تر شده است. عواملی مانند تجربه کاربری (UX)، سرعت بارگذاری صفحه، محتوای باکیفیت، سیگنال‌های اجتماعی و E-E-A-T (تجربه، تخصص، معتبر بودن و قابل اعتماد بودن) نقش کلیدی دارند.

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

تحقیق کلمات کلیدی هوشمندانه

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

ابزارهایی مانند Google Keyword Planner، Ahrefs، SEMrush و Ubersuggest می‌توانند به شما کمک کنند تا کلمات کلیدی دقیق و موثری پیدا کنید. همچنین، تمرکز بر کلمات کلیدی بلند (Long-tail Keywords) بسیار توصیه می‌شود، زیرا رقابت کمتری دارند و معمولاً نرخ تبدیل بالاتری دارند.

مثال: به جای هدف قرار دادن کلمه کلیدی “بهترین گوشی”، می‌توانید روی “بهترین گوشی هوشمند زیر ۵ میلیون تومان برای عکاسی” تمرکز کنید. این کلمه کلیدی بلند، مشتری هدف دقیق‌تری دارد و احتمال رتبه‌گیری در آن بیشتر است.

تولید محتوای ارزشمند و عمیق

گوگل به محتوایی امتیاز می‌دهد که بهترین پاسخ ممکن را به سؤال کاربر ارائه دهد. بنابراین، برای رتبه اول شدن، باید محتوایی بنویسید که از نظر عمق، دقت و ارزش اطلاعاتی، فراتر از رقبای خود باشد.

محتوای شما باید:

  • به طور کامل به سؤال کاربر پاسخ دهد
  • دارای ساختار منظم (عنوان‌ها، زیرعنوان‌ها، لیست‌ها)
  • شامل داده‌های به‌روز، آمار و منابع معتبر باشد
  • از زبان ساده و روان استفاده کند

همچنین، طول محتوا نیز مهم است. در بسیاری از صنایع، محتوایی با بیش از ۱۵۰۰ تا ۲۰۰۰ کلمه شانس بیشتری برای رتبه‌بندی دارد، به شرطی که محتوا بی‌مورد نباشد و هر بخش به نفع کاربر باشد.

بهینه‌سازی فنی سایت (Technical SEO)

حتی اگر بهترین محتوا را داشته باشید، اگر سایت شما از نظر فنی مشکل داشته باشد، هرگز به رتبه اول نخواهید رسید. Technical SEO شامل مواردی مانند:

  • سرعت بارگذاری صفحه: صفحات باید در کمتر از ۲ ثانیه بارگذاری شوند.
  • سازگاری با موبایل: گوگل از سال ۲۰۱۸ به بعد به موبایل اولویت می‌دهد (Mobile-First Indexing).
  • ساختار URL مناسب: URL باید کوتاه، توصیفی و شامل کلمه کلیدی باشد.
  • نقشه سایت (Sitemap): برای کمک به گوگل در فهرست‌بندی صفحات.
  • فایل robots.txt: برای کنترل دسترسی ربات‌ها به بخش‌های مختلف سایت.
  • ریدایرکت‌های صحیح: جلوگیری از صفحات 404 و حفظ ارزش لینک.

استفاده از ابزارهایی مانند Google Search Console و PageSpeed Insights می‌تواند به شما کمک کند تا مشکلات فنی سایت را شناسایی و رفع کنید.

بهبود تجربه کاربری (UX) و طراحی واکنش‌گرا

تجربه کاربری یکی از مهم‌ترین عوامل رتبه‌بندی در گوگل است. گوگل با استفاده از سیگنال‌هایی مانند نرخ پرش (Bounce Rate)، زمان ماندگاری در صفحه و نرخ تعامل، کیفیت تجربه کاربری را ارزیابی می‌کند.

برای بهبود UX:

  • از طراحی ساده و تمیز استفاده کنید.
  • دکمه‌ها و لینک‌ها را واضح و قابل دسترس بگذارید.
  • از فونت‌های خوانا و رنگ‌های مناسب استفاده کنید.
  • محتوا را با فاصله‌گذاری مناسب و پاراگراف‌های کوتاه ارائه دهید.

همچنین، اطمینان حاصل کنید که سایت شما در تمام دستگاه‌ها (موبایل، تبلت، دسکتاپ) به خوبی نمایش داده می‌شود. طراحی واکنش‌گرا (Responsive Design) دیگر یک گزینه نیست، بلکه یک ضرورت است.

ساختار داخلی لینک‌دهی (Internal Linking)

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

برای ایجاد یک سیستم لینک‌دهی داخلی قوی:

  • از متن لینک (Anchor Text) توصیفی و مرتبط استفاده کنید.
  • صفحات مهم را از صفحات دیگر لینک کنید.
  • از لینک‌های اضافی و بی‌ربط خودداری کنید.

به عنوان مثال، در مقاله‌ای درباره “سئو”، می‌توانید به مقاله‌های دیگری مانند “تحقیق کلمات کلیدی” یا “بهینه‌سازی فنی” لینک دهید. این کار هم ارزش سئویی ایجاد می‌کند و هم تجربه کاربری را بهبود می‌بخشد.

لینک‌سازی معکوس باکیفیت (Backlink Building)

لینک‌های معکوس (Backlinks) همچنان یکی از مهم‌ترین عوامل رتبه‌بندی در گوگل هستند. اما امروزه گوگل به کیفیت لینک‌ها اهمیت بیشتری می‌دهد تا کمیت. یک لینک از یک وبسایت معتبر و مرتبط، ارزش بیشتری از صدها لینک از سایت‌های اسپم دارد.

راه‌های موثر برای ساخت لینک:

  • میهمان نویسی (Guest Posting) در وبسایت‌های معتبر صنعت خود
  • ایجاد محتوای قابل اشتراک مانند اینفوگرافیک، تحقیقات یا ابزارهای رایگان
  • لینک‌های طبیعی از طریق ارتباط با وبلاگ‌نویسان و رسانه‌ها
  • لینک از دایرکتوری‌های معتبر (مثل دایرکتوری‌های صنفی یا محلی)

به یاد داشته باشید که لینک‌سازی باید طبیعی و تدریجی باشد. افزایش ناگهانی لینک‌ها ممکن است توسط گوگل به عنوان رفتار غیرطبیعی تلقی شود.

به‌روزرسانی مداوم محتوا

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

برای جلوگیری از این اتفاق:

  • مقالات قدیمی را هر ۶ تا ۱۲ ماه یک‌بار بررسی و به‌روز کنید.
  • اطلاعات، آمار و لینک‌های منقضی را اصلاح کنید.
  • محتوای جدید را به مقاله اضافه کنید.

این کار نه تنها به رتبه‌بندی کمک می‌کند، بلکه به کاربران نشان می‌دهد که شما به کیفیت و دقت اهمیت می‌دهید.

استفاده از سیگنال‌های اجتماعی و تعامل

اگرچه سیگنال‌های اجتماعی (مثل لایک، اشتراک و کامنت) به طور مستقیم در الگوریتم رتبه‌بندی گوگل نقش ندارند، اما تأثیر غیرمستقیم قوی دارند. محتوایی که بیشتر به اشتراک گذاشته می‌شود، بیشتر دیده می‌شود، بیشتر لینک می‌گیرد و در نهایت شانس بیشتری برای رتبه‌بندی دارد.

راهکارها:

  • دکمه‌های اشتراک‌گذاری در شبکه‌های اجتماعی را در مقالات قرار دهید.
  • محتوای خود را در گروه‌ها و کانال‌های مرتبط به اشتراک بگذارید.
  • از کاربران بخواهید نظرات خود را بنویسند و با آنها تعامل کنید.

این تعامل‌ها باعث افزایش اعتماد و وفاداری کاربران می‌شوند.

اندازه‌گیری و تحلیل عملکرد (Analytics)

هیچ استراتژی سئو بدون تحلیل و اندازه‌گیری کامل نیست. شما باید بتوانید بفهمید که چه چیزی جواب می‌دهد و چه چیزی نه. ابزارهایی مانند Google Analytics و Google Search Console به شما کمک می‌کنند تا:

  • ترافیک ارگانیک را رصد کنید
  • کلمات کلیدی که شما را به رتبه بالا می‌آورند، شناسایی کنید
  • صفحات با نرخ پرش بالا را پیدا کنید
  • بهبودهای لازم را اعمال کنید

بر اساس این داده‌ها، می‌توانید استراتژی خود را تغییر دهید، محتوای ضعیف را بهبود بخشید و روی صفحات موفق تمرکز کنید.

سئو محلی: اگر کسب‌وکار فیزیکی دارید

اگر کسب‌وکار شما محلی است (مثل آرایشگاه، رستوران یا مطب)، سئوی محلی می‌تواند شما را به رتبه اول در نتایج محلی (Local Pack) برساند. برای این کار:

  • پروفایل Google Business Profile (پیش از Google My Business) خود را کامل و دقیق پر کنید.
  • از عکس‌های باکیفیت، ساعات کاری و شماره تماس واقعی استفاده کنید.
  • از مشتریان بخواهید نظرات خود را بنویسند.
  • نام، آدرس و شماره تماس (NAP) خود را در تمام دایرکتوری‌ها یکسان نگه دارید.

این کار به شما کمک می‌کند در جستجوهایی مانند “بهترین قهوه‌خانه در تهران” دیده شوید.

صبر و پشتکار: سئو یک فرآیند بلندمدت است

نکته پایانی این است که سئو یک فرآیند بلندمدت است. رسیدن به رتبه اول گوگل ممکن است چند ماه تا چند سال طول بکشد، به ویژه در رقابت‌های سنگین. اما با برنامه‌ریزی دقیق، اجرای مداوم و به‌روزرسانی استراتژی، این هدف کاملاً قابل دستیابی است.

موفقیت در سئو شبیه ساخت یک ساختمان است: ابتدا پی‌ریزی محکم می‌کنید (Technical SEO)، سپس دیوارها را می‌سازید (محتوا و لینک)، و در نهایت ساختمان را تزئین و به‌روز می‌کنید (تحلیل و بهبود). هر مرحله ضروری است.

نتیجه‌گیری

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

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

 

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

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

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

,

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

مقدمه

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

ساختار HTML

<div class="loading-container">
    <div class="circle-loader">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
    <div class="loading-text">loading ....</div>
</div>

  • loading-container: ظرف اصلی برای مرتب کردن عناصر

  • circle-loader: ظرف دایره‌های انیمیشنی

  • circle: سه دایره با رنگ‌های مختلف

  • loading-text: متن نمایشی زیر انیمیشن

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

بخش‌های اصلی:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: white;
    margin: 0;
    font-family: Arial, sans-serif;
}

  • صفحه را به صورت flex تنظیم می‌کنیم تا محتوا در مرکز قرار گیرد

  • ارتفاع viewport را کامل می‌گیرد

  • پس‌زمینه سفید برای تمیز بودن طراحی

ظرف لودینگ:

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

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

  • فاصله 20px بین انیمیشن و متن ایجاد می‌کند

متن لودینگ:

.loading-text {
    font-size: 14px;
    color: #333;
    letter-spacing: 2px;
    animation: pulse 1.5s infinite ease-in-out;
}

  • فونت و رنگ مناسب برای خوانایی

  • انیمیشن pulse برای جلوه‌ی چشمک زن

دایره‌های انیمیشنی:

.circle-loader {
    width: 80px;
    height: 80px;
    position: relative;
}

.circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: rotate 2s linear infinite;
    box-sizing: border-box;
}

  • اندازه ثابت برای ظرف دایره‌ها

  • position: relative برای موقعیت‌دهی مطلق دایره‌های داخلی

  • border-radius: 50% برای شکل دایره‌ای

  • انیمیشن rotate با مدت زمان 2 ثانیه

تنظیمات هر دایره:

.circle:nth-child(1) {
    border: 4px solid transparent;
    border-top-color: #3498db;
    border-bottom-color: #3498db;
}

.circle:nth-child(2) {
    border: 4px solid transparent;
    border-left-color: #e74c3c;
    border-right-color: #e74c3c;
    animation-delay: 0.5s;
    transform: rotate(30deg);
}

.circle:nth-child(3) {
    border: 4px solid transparent;
    border-top-color: #2ecc71;
    border-bottom-color: #2ecc71;
    animation-delay: 1s;
    transform: rotate(60deg);
}

  • هر دایره رنگ مخصوص به خود را دارد

  • animation-delay برای ایجاد افکت موجی

  • transform: rotate برای چیدمان اولیه نیم‌دایره‌ها

انیمیشن‌ها:

@keyframes rotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(0.8);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

  • rotate: چرخش 360 درجه همراه با تغییر اندازه

  • pulse: تغییر تدریجی شفافیت متن

کد کامل

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circular Loading Animation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: white;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        
        .loading-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        
        .loading-text {
            font-size: 14px;
            color: #333;
            letter-spacing: 2px;
            animation: pulse 1.5s infinite ease-in-out;
        }
        
        .circle-loader {
            width: 80px;
            height: 80px;
            position: relative;
        }
        
        .circle {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            animation: rotate 2s linear infinite;
            box-sizing: border-box;
        }
        
        .circle:nth-child(1) {
            border: 4px solid transparent;
            border-top-color: #3498db;
            border-bottom-color: #3498db;
        }
        
        .circle:nth-child(2) {
            border: 4px solid transparent;
            border-left-color: #e74c3c;
            border-right-color: #e74c3c;
            animation-delay: 0.5s;
            transform: rotate(30deg);
        }
        
        .circle:nth-child(3) {
            border: 4px solid transparent;
            border-top-color: #2ecc71;
            border-bottom-color: #2ecc71;
            animation-delay: 1s;
            transform: rotate(60deg);
        }
        
        @keyframes rotate {
            0% {
                transform: rotate(0deg) scale(1);
            }
            50% {
                transform: rotate(180deg) scale(0.8);
            }
            100% {
                transform: rotate(360deg) scale(1);
            }
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 0.6;
            }
            50% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div class="loading-container">
        <div class="circle-loader">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="loading-text">loading ....</div>
    </div>
</body>
</html>

نکات تکمیلی

  1. تنظیم سرعت: می‌توانید duration انیمیشن‌ها را تغییر دهید

  2. تغییر رنگ: رنگ‌ها را متناسب با پالت رنگ پروژه خود تنظیم کنید

  3. سایز: اندازه دایره‌ها با تغییر width و height در .circle-loader قابل تنظیم است

  4. تعداد دایره‌ها: می‌توانید دایره‌های بیشتری اضافه کنید

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

 

آیا این آموزش برای شما مفید بود؟
سوالی دارید؟
ایده‌ای برای بهبود انیمیشن دارید؟
تجربه استفاده از این کد را با ما به اشتراک بگذارید!

 

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

آموزش طراحی دکمه‌های شبکه‌های اجتماعی با افکت سه‌بعدی در CSS

,

امروزه دکمه‌های شبکه‌های اجتماعی بخش مهمی از طراحی رابط کاربری (UI) هستند. در این مقاله، یاد می‌گیرید چگونه دکمه‌های مربعی با چرخش ۴۵ درجه طراحی کنید که هنگام هاور رنگ پس‌زمینه آنها به رنگ رسمی هر شبکه اجتماعی تغییر کند.

ابزارهای مورد نیاز

  • HTML5 (برای ساختار)

  • CSS3 (برای استایل‌دهی و افکت‌ها)

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

آموزش گام‌به‌گام

۱. ساختار HTML

کد زیر چارچوب اصلی دکمه‌ها را ایجاد می‌کند:

<!DOCTYPE html>
<html lang="fa">
<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">
</head>
<body>
    <div class="social-buttons">
        <button class="social-btn whatsapp"><i class="fab fa-whatsapp"></i></button>
        <button class="social-btn twitter"><i class="fab fa-twitter"></i></button>
        <button class="social-btn youtube"><i class="fab fa-youtube"></i></button>
        <button class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></button>
    </div>
</body>
</html>

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

در این بخش، افکت‌های سه‌بعدی و تغییر رنگ را پیاده‌سازی می‌کنیم:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: white;
}

.social-buttons {
    display: flex;
    gap: 15px;
}

.social-btn {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #555;
    background: #f0f0f0;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.social-btn i {
    transform: rotate(-45deg);
    transition: all 0.3s ease;
}

/* تغییر رنگ هنگام هاور */
.whatsapp:hover { background: #25D366; }
.twitter:hover { background: #1DA1F2; }
.youtube:hover { background: #FF0000; }
.linkedin:hover { background: #0077B5; }

.social-btn:hover i {
    color: white;
    transform: rotate(-45deg) scale(1.1);
}

کد نهایی آماده برای استفاده

کدهای زیر را می‌توانید در هر پروژه وب‌سایتی استفاده کنید. این کدها شامل HTML و CSS کامل برای ایجاد دکمه‌های شبکه‌های اجتماعی با افکت سه‌بعدی است:

<!DOCTYPE html>
<html lang="fa">
<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;
            background: white;
        }
        .social-buttons {
            display: flex;
            gap: 15px;
        }
        .social-btn {
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: #555;
            background: #f0f0f0;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            transform: rotate(45deg);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .social-btn i {
            transform: rotate(-45deg);
            transition: all 0.3s ease;
        }
        .whatsapp:hover { background: #25D366; }
        .twitter:hover { background: #1DA1F2; }
        .youtube:hover { background: #FF0000; }
        .linkedin:hover { background: #0077B5; }
        .social-btn:hover i {
            color: white;
            transform: rotate(-45deg) scale(1.1);
        }
    </style>
</head>
<body>
    <div class="social-buttons">
        <button class="social-btn whatsapp"><i class="fab fa-whatsapp"></i></button>
        <button class="social-btn twitter"><i class="fab fa-twitter"></i></button>
        <button class="social-btn youtube"><i class="fab fa-youtube"></i></button>
        <button class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></button>
    </div>
</body>
</html>

نحوه استفاده از این کدها:

  1. کدهای بالا را در یک فایل با پسوند .html ذخیره کنید.

  2. می‌توانید این کدها را در هر پروژه وب‌سایتی (مانند سایت‌های استاتیک یا سیستم‌های مدیریت محتوای غیر از وردپرس) استفاده کنید.

  3. برای تغییر رنگ‌ها یا اندازه دکمه‌ها، مقادیر CSS را ویرایش کنید.

 

نظر شما چیست؟

اگر این آموزش برایتان مفید بود یا پیشنهادی برای بهبود دارید، خوشحال می‌شویم در بخش نظرات با ما در میان بگذارید!

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

آموزش ساخت آیکون‌های مینیمال شبکه‌های اجتماعی با افکت hover رنگی

,

در این آموزش، نحوه ایجاد آیکون‌های مینیمال و زیبا برای شبکه‌های اجتماعی با استفاده از CSS و کتابخانه Font Awesome را یاد می‌گیرید. این آیکون‌ها دارای افکت hover هستند که هنگام قرارگیری ماوس روی آن‌ها، به رنگ رسمی هر شبکه اجتماعی تغییر می‌کنند.

مراحل پیاده‌سازی

افزودن فونت Awesome
ابتدا کتابخانه Font Awesome را به پروژه خود اضافه کنید:

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

ساخت ساختار HTML

ساخت ساختار HTML

<div class="social-container">
    <a href="#" class="social-btn youtube"><i class="fab fa-youtube"></i></a>
    <a href="#" class="social-btn twitter"><i class="fab fa-twitter"></i></a>
    <a href="#" class="social-btn instagram"><i class="fab fa-instagram"></i></a>
    <a href="#" class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></a>
    <a href="#" class="social-btn whatsapp"><i class="fab fa-whatsapp"></i></a>
</div>

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

.social-container {
    display: flex;
    gap: 15px;
}
.social-btn {
    width: 50px;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color: #333;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.social-btn.youtube:hover { color: #FF0000; border-color: #FF0000; }
.social-btn.twitter:hover { color: #1DA1F2; border-color: #1DA1F2; }
.social-btn.instagram:hover { color: #E1306C; border-color: #E1306C; }
.social-btn.linkedin:hover { color: #0A66C2; border-color: #0A66C2; }
.social-btn.whatsapp:hover { color: #25D366; border-color: #25D366; }

کد کامل

<!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 {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
        }
        .social-container {
            display: flex;
            gap: 15px;
        }
        .social-btn {
            width: 50px;
            height: 50px;
            border: 1px solid #ddd;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: transparent;
            color: #333;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .social-btn.youtube:hover { color: #FF0000; border-color: #FF0000; }
        .social-btn.twitter:hover { color: #1DA1F2; border-color: #1DA1F2; }
        .social-btn.instagram:hover { color: #E1306C; border-color: #E1306C; }
        .social-btn.linkedin:hover { color: #0A66C2; border-color: #0A66C2; }
        .social-btn.whatsapp:hover { color: #25D366; border-color: #25D366; }
    </style>
</head>
<body>
    <div class="social-container">
        <a href="#" class="social-btn youtube"><i class="fab fa-youtube"></i></a>
        <a href="#" class="social-btn twitter"><i class="fab fa-twitter"></i></a>
        <a href="#" class="social-btn instagram"><i class="fab fa-instagram"></i></a>
        <a href="#" class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></a>
        <a href="#" class="social-btn whatsapp"><i class="fab fa-whatsapp"></i></a>
    </div>
</body>
</html>

نظر شما چیست؟

آیا این آموزش برای شما مفید بود؟ اگر سوال یا پیشنهادی دارید، در بخش نظرات با ما در میان بگذارید.

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

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