بایگانی‌های CSS - صفحه 2 از 2

آموزش طراحی دکمه Add to Cart با انیمیشن CSS و JavaScript

در این مقاله یاد می‌گیریم چگونه یک دکمه “Add to Cart” با انیمیشن ساده و بصری جذاب تهیه کنیم. در این نمونه:

با کلیک روی دکمه:
- متن “Add to Cart” محو می‌شود
- آیکن سبد خرید با انیمیشن از سمت چپ وارد می‌شود و در وسط موقف می‌شود

کد HTML:

<button id="cartBtn">
  <span class="text">Add to Cart</span>
  <i class="fas fa-cart-shopping icon"></i>
</button>

<button> یک دکمه کلیکی است
<span class="text"> متن اولیه دکمه است
<i class="fas fa-cart-shopping"> آیکن سبد خرید از Font Awesome

کد CSS:

button {
  width: 200px;
  height: 60px;
  background: #f97316;
  color: white;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.text, .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.5s ease;
}
.text {
  left: 50%;
  transform: translate(-50%, -50%);
}
.icon {
  left: -40px;
  font-size: 24px;
  opacity: 0;
}
.clicked .text {
  opacity: 0;
}
.clicked .icon {
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

دکمه همه چیز را درون خود جای می‌دهد
.clicked یک کلاس است که بعد از کلیک به دکمه اضافه می‌شود

کد JavaScript:

document.getElementById('cartBtn').addEventListener('click', function () {
  this.classList.add('clicked');
});

با کلیک روی دکمه، کلاس clicked به آن اضافه می‌شود و CSS انیمیشن را اجرا می‌کند.

کد کامل:

در صورتی که می‌خواهید همه کدها را به صورت یکجا کپی و استفاده کنید، از قطعه کد زیر استفاده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Add to Cart Animation</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <style>
    body {
      margin: 0;
      background: #f3f4f6;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: sans-serif;
    }
    button {
      width: 200px;
      height: 60px;
      background: #f97316;
      color: white;
      font-size: 18px;
      border: none;
      border-radius: 8px;
      position: relative;
      cursor: pointer;
      overflow: hidden;
    }
    .text, .icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      transition: all 0.5s ease;
    }
    .text {
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .icon {
      left: -40px;
      font-size: 24px;
      opacity: 0;
    }
    .clicked .text {
      opacity: 0;
    }
    .clicked .icon {
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 1;
    }
  </style>
</head>
<body>

  <button id="cartBtn">
    <span class="text">Add to Cart</span>
    <i class="fas fa-cart-shopping icon"></i>
  </button>

  <script>
    document.getElementById('cartBtn').addEventListener('click', function () {
      this.classList.add('clicked');
    });
  </script>

</body>
</html>

جمع‌بندی:

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

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

2025-07-24/0 دیدگاه /توسط admin

ساخت دکمه دانلود با انیمیشن پیشرفت و وضعیت موفق با HTML و CSS

CSS, HTML

ساخت دکمه دانلود با انیمیشن پیشرفت و وضعیت موفق با HTML و CSS

در این آموزش از صفر تا صد طراحی یک دکمه دانلود مدرن با استفاده از HTML و CSS را یاد می‌گیرید؛ دکمه‌ای که هنگام کلیک، وارد حالت progress شده، انیمیشن چرخان نمایش می‌دهد و در پایان عملیات، به حالت موفقیت (success) با آیکون تیک و متن done تغییر می‌کند.

بخش اول: طراحی اولیه دکمه دانلود

در ابتدا یک دکمه ساده طراحی می‌کنیم که دارای آیکون دانلود (⬇) و متن download باشد. این دکمه دارای طراحی دایره‌ای، رنگ پس‌زمینه شفاف، حاشیه رنگی، و استایل مدرن است.

کد HTML ابتدایی:

<button class="download-btn">
  <span class="icon">⬇</span>
  <span class="text">download</span>
</button>

بخش دوم: استایل‌دهی کامل با CSS

در این بخش، با استفاده از CSS دکمه را به‌شکلی مدرن، جذاب و واکنش‌گرا طراحی می‌کنیم. هدف این است که کاربر نه‌تنها از ظاهر دکمه لذت ببرد، بلکه هنگام تعامل با آن (مثلاً کلیک برای دانلود) تجربه‌ی واضح، طبیعی و دل‌چسبی داشته باشد.

رنگ‌ها و وضعیت‌ها

ما از سه رنگ اصلی برای نشان دادن وضعیت‌های مختلف دکمه استفاده می‌کنیم:

آبی (رنگ اولیه): برای حالت پیش‌فرض که نشان می‌دهد کاربر هنوز روی دکمه کلیک نکرده.
زرد مایل به نارنجی (warning): برای نمایش حالت «در حال دانلود» که با انیمیشن چرخشی همراه است.
سبز (success): پس از اتمام دانلود، دکمه سبز می‌شود تا به کاربر تأیید دهد که عملیات با موفقیت انجام شده.

استفاده از این رنگ‌ها نه‌تنها بر پایه استانداردهای طراحی رابط کاربری (UI) است، بلکه به صورت بصری و بدون نیاز به توضیح، وضعیت را به کاربر منتقل می‌کند.

CSS کامل برای طراحی دکمه:

:root {
  --primary: #00d2ff;
  --warning: #e0a800;
  --success: #28a745;
  --text-color: #ffffff;
  --text-muted: #dddddd;
  --bg-dark: #2e3333;
}

body {
  background-color: var(--bg-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.download-btn {
  display: flex;
  align-items: center;
  background-color: transparent;
  border: 2px solid var(--primary);
  border-radius: 50px;
  padding: 8px 20px 8px 8px;
  font-family: sans-serif;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.download-btn .icon {
  width: 40px;
  height: 40px;
  background-color: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.download-btn .text {
  font-size: 16px;
  margin-left: 12px;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.download-btn:hover {
  background-color: rgba(0, 210, 255, 0.08);
  transform: translateY(-1px);
}

.download-btn.loading {
  border-color: var(--warning);
}

.download-btn.loading .icon {
  background-color: white;
  color: var(--warning);
  animation: spin 1s linear infinite;
}

.download-btn.loading .text {
  color: var(--text-muted);
}

.download-btn.done {
  border-color: var(--success);
}

.download-btn.done .icon {
  background-color: white;
  color: var(--success);
}

.download-btn.done .text {
  color: var(--success);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

بخش سوم: افزودن رفتار دکمه با JavaScript

برای شبیه‌سازی دانلود، با استفاده از جاوااسکریپت کلاس‌های loading و done را به دکمه اضافه می‌کنیم. این باعث فعال شدن انیمیشن و تغییر رنگ و آیکون می‌شود.

JavaScript برای مدیریت وضعیت دکمه:

<script>
  function startDownload(btn) {
    if (btn.classList.contains('loading')) return;

    const icon = btn.querySelector('.icon');
    const text = btn.querySelector('.text');

    btn.classList.remove('done');
    btn.classList.add('loading');
    icon.textContent = '⟳';
    text.textContent = 'downloading...';

    setTimeout(() => {
      btn.classList.remove('loading');
      btn.classList.add('done');
      icon.textContent = '✔';
      text.textContent = 'done';
    }, 3000);
  }
</script>

کد کامل HTML آماده اجرا

در اینجا کل کد HTML، CSS و JS را در یک فایل یک‌پارچه می‌بینید. کافی است آن را در مرورگر اجرا کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Download Button</title>
  <style>
    :root {
      --primary: #00d2ff;
      --warning: #e0a800;
      --success: #28a745;
      --text-color: #ffffff;
      --text-muted: #dddddd;
      --bg-dark: #2e3333;
    }

    body {
      background-color: var(--bg-dark);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .download-btn {
      display: flex;
      align-items: center;
      background-color: transparent;
      border: 2px solid var(--primary);
      border-radius: 50px;
      padding: 8px 20px 8px 8px;
      font-family: sans-serif;
      color: var(--text-color);
      cursor: pointer;
      transition: all 0.3s ease;
      outline: none;
    }

    .download-btn .icon {
      width: 40px;
      height: 40px;
      background-color: var(--primary);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }

    .download-btn .text {
      font-size: 16px;
      margin-left: 12px;
      white-space: nowrap;
      transition: color 0.3s ease;
    }

    .download-btn:hover {
      background-color: rgba(0, 210, 255, 0.08);
      transform: translateY(-1px);
    }

    .download-btn.loading {
      border-color: var(--warning);
    }

    .download-btn.loading .icon {
      background-color: white;
      color: var(--warning);
      animation: spin 1s linear infinite;
    }

    .download-btn.loading .text {
      color: var(--text-muted);
    }

    .download-btn.done {
      border-color: var(--success);
    }

    .download-btn.done .icon {
      background-color: white;
      color: var(--success);
    }

    .download-btn.done .text {
      color: var(--success);
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <button class="download-btn" onclick="startDownload(this)">
    <span class="icon">⬇</span>
    <span class="text">download</span>
  </button>

  <script>
    function startDownload(btn) {
      if (btn.classList.contains('loading')) return;

      const icon = btn.querySelector('.icon');
      const text = btn.querySelector('.text');

      btn.classList.remove('done');
      btn.classList.add('loading');
      icon.textContent = '⟳';
      text.textContent = 'downloading...';

      setTimeout(() => {
        btn.classList.remove('loading');
        btn.classList.add('done');
        icon.textContent = '✔';
        text.textContent = 'done';
      }, 3000);
    }
  </script>
</body>
</html>

نتیجه‌گیری

با چند خط HTML، CSS و JavaScript می‌توان یک دکمه‌ی حرفه‌ای و زیبا برای عملیات دانلود یا هر عملیات زمان‌بر دیگری ساخت. این دکمه با استفاده از انیمیشن، رنگ‌بندی هشدار و موفقیت، تجربه‌ی کاربری (UX) بهتری ارائه می‌دهد و می‌تواند در اپلیکیشن‌های واقعی به‌خوبی مورد استفاده قرار گیرد.

نظر شما چیه؟

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

منتظر نظرات ارزشمندت هستم.

2025-07-23/0 دیدگاه /توسط admin

آموزش ساخت اسلایدر استوری با HTML و CSS (بدون نیاز به جاوااسکریپت)

CSS, HTML

در طراحی رابط کاربری فروشگاه‌های اینترنتی، نمایش جذاب دسته‌بندی‌ها و پیشنهادات ویژه اهمیت زیادی دارد. یکی از ترندهای جذاب UI، استفاده از اسلایدر استایل “استوری” است. در این مقاله قصد داریم کدی را بررسی کنیم که بدون نیاز به جاوااسکریپت، با استفاده از HTML و CSS، یک اسلایدر افقی ساده ولی حرفه‌ای ایجاد می‌کند. این طراحی، برای نمایش دسته‌بندی‌ها، محصولات ویژه یا بنرهای تبلیغاتی بسیار مناسب است.

هدف این مقاله

آموزش نحوه پیاده‌سازی اسلایدر استوری با HTML و CSS
بررسی ساختار کد و استایل‌ها
بررسی نکات کاربردی برای سفارشی‌سازی
رعایت اصول سئو و تجربه کاربری (UX)

معرفی کد

در اینجا یک قطعه کد ساده ولی قدرتمند آورده شده که ظاهر آن شبیه استوری اینستاگرام طراحی شده است. این اسلایدر از Flexbox و overflow افقی برای نمایش آیتم‌ها استفاده می‌کند و نیازی به اسکریپت یا کتابخانه خاصی ندارد.

🧩 کد کامل اسلایدر استوری:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>استوری اسلایدر</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background-color: #f5f5f5;
    }

    .story-container {
      background: #fff;
      padding: 10px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
      overflow-x: auto;
      white-space: nowrap;
      direction: rtl;
    }

    .story-slider {
      display: flex;
      gap: 16px;
    }

    .story {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: opacity 0.3s;
    }

    .story:hover {
      opacity: 0.8;
    }

    .story-ring {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      padding: 2px;
      background: conic-gradient(from 0deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .story img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      background-color: #fff;
    }

    .story span {
      margin-top: 6px;
      font-size: 12px;
      text-align: center;
      color: #333;
      white-space: nowrap;
    }

    .story-container::-webkit-scrollbar {
      display: none;
    }

    .story-container {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
  </style>
</head>
<body>

  <div class="story-container">
    <div class="story-slider">

      <div class="story">
        <div class="story-ring">
          <img src="https://placehold.co/64x64/ffd6e0/ffffff?text=" alt="سوپرمارکت" />
        </div>
        <span>سوپرمارکت</span>
      </div>

      <div class="story">
        <div class="story-ring">
          <img src="https://placehold.co/64x64/d1e8ff/ffffff?text=" alt="مد و پوشاک" />
        </div>
        <span>مد و پوشاک</span>
      </div>

      <div class="story">
        <div class="story-ring">
          <img src="https://placehold.co/64x64/cbf1cc/ffffff?text=" alt="موبایل" />
        </div>
        <span>موبایل</span>
      </div>

      <div class="story">
        <div class="story-ring">
          <img src="https://placehold.co/64x64/ffe5b4/ffffff?text=" alt="زیبایی" />
        </div>
        <span>زیبایی</span>
      </div>

      <div class="story">
        <div class="story-ring">
          <img src="https://placehold.co/64x64/e5d4ef/ffffff?text=" alt="دیجیتال" />
        </div>
        <span>دیجیتال</span>
      </div>

      <div class="story">
        <div class="story-ring">
          <img src="https://placehold.co/64x64/fde2e4/ffffff?text=" alt="آشپزخانه" />
        </div>
        <span>آشپزخانه</span>
      </div>

    </div>
  </div>

</body>
</html>

بررسی ساختار HTML

در بخش HTML، اجزای اصلی اسلایدر به این صورت تعریف شده‌اند:

.story-container: عنصر اصلی حاوی اسلایدر که قابلیت اسکرول افقی دارد.
.story-slider: مجموعه‌ای از استوری‌ها به صورت Flex.
.story: هر آیتم یا استوری شامل تصویر دایره‌ای و یک عنوان است.
.story-ring: حلقه رنگی اطراف تصویر که حس استوری را القا می‌کند.
<img>: تصویر شاخص هر دسته‌بندی یا موضوع.
<span>: عنوان هر استوری.

بررسی CSS و طراحی ظاهری

در بخش CSS از تکنیک‌های زیر استفاده شده:

Flexbox برای چینش افقی آیتم‌ها
Scrollbar مخفی برای زیبایی بیشتر و تجربه کاربری بهتر
Conic-gradient برای ساخت حلقه رنگی اطراف تصویر (الهام‌گرفته از استوری اینستاگرام)
Transition در حالت hover برای تعامل بیشتر با کاربر
استفاده از object-fit: cover برای نمایش صحیح تصویر داخل قاب دایره‌ای

پیش‌نمایش خروجی نهایی اسلایدر

در تصویر زیر می‌توانید نمونه خروجی اسلایدر استایل استوری را مشاهده کنید. این اسلایدر به‌صورت افقی قابل اسکرول است و ظاهر مدرنی دارد که به تجربه کاربری جذاب‌تر کمک می‌کند.

طراحی استوری اسلایدر برای سایت با html و css

مزایای این طراحی

✅ سبک و سریع
✅ بدون نیاز به جاوااسکریپت
✅ سازگار با موبایل (Responsive)
✅ قابل استفاده برای دسته‌بندی‌ها، تبلیغات ویژه، یا استوری محصولات
✅ سفارشی‌سازی آسان (تغییر عکس، رنگ، عنوان‌ها)

نکات کلیدی سئو و تجربه کاربری

استفاده از alt برای تصاویر جهت بهبود سئو تصاویر
استفاده از تگ‌های معنایی مثل <section>, <span>, <img>
نمایش جذاب در موبایل بدون نیاز به پلاگین
توجه به سرعت لود به دلیل سبک بودن ساختار و عدم استفاده از JS

نحوه استفاده و شخصی‌سازی

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

کد CSS و HTML را در قالب صفحه یا سایت خود قرار دهید.
تصاویر و متن‌های موجود در تگ <img> و <span> را با محتوای دلخواه خود تغییر دهید.
در صورت نیاز، با تغییر رنگ‌ها یا اندازه‌ها در CSS، ظاهر را با برند خود هماهنگ کنید.

نتیجه‌گیری

با استفاده از این کد ساده، می‌توانید یک اسلایدر استایل استوری کاملاً حرفه‌ای و واکنش‌گرا را به راحتی در سایت خود پیاده‌سازی کنید. این نوع طراحی نه تنها ظاهری مدرن و جذاب به رابط کاربری شما می‌دهد، بلکه با توجه به سادگی کد، تأثیر منفی بر سرعت سایت هم ندارد. برای فروشگاه‌ها، بلاگ‌ها یا صفحات فرود، این یک ابزار بصری عالی برای جلب توجه کاربران است.

2025-07-20/0 دیدگاه /توسط admin

جوجه‌ای که موس شما را دنبال می‌کند! | پروژه تعاملی با HTML, CSS, JavaScript

CSS, HTML

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

ویژگی‌های پروژه

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

نحوه عملکرد

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

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

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

اگر هنوز ویدیوی مربوط به این پروژه را مشاهده نکرده‌اید، پیشنهاد می‌کنیم حتماً آن را در کانال ما در یوتیوب ببینید:

👉 @highlearn_ir

کد کامل پروژه

در ادامه می‌توانید کد کامل این پروژه را مشاهده کنید. کافی‌ست آن را در یک فایل با پسوند .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>
    <style>
        body {
            margin: 0;
            height: 100vh;
            overflow: hidden;
            background-color: #f0f8ff;
            cursor: none;
        }
        
        #seed {
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: #d62c1a;
            border-radius: 50%;
            z-index: 1001;
            pointer-events: none;
            transform: translate(-50%, -50%);
        }
        
        #chicken {
            position: absolute;
            width: 80px;
            height: 80px;
            pointer-events: none;
            z-index: 1000;
            transform-origin: center;
        }
        
        .chicken-body {
            position: absolute;
            width: 50px;
            height: 60px;
            background: #ffeb3b;
            border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
            top: 20px;
            left: 15px;
            box-shadow: inset -3px -3px 7px rgba(0,0,0,0.1);
        }
        
        .chicken-head {
            position: absolute;
            width: 30px;
            height: 30px;
            background: #ffeb3b;
            border-radius: 50%;
            top: 10px;
            left: 40px;
            box-shadow: inset -2px -2px 4px rgba(0,0,0,0.1);
        }
        
        .eye {
            position: absolute;
            width: 5px;
            height: 5px;
            background: #000;
            border-radius: 50%;
            top: 10px;
            right: 7px;
        }
        
        .beak {
            position: absolute;
            width: 10px;
            height: 7px;
            background: #ff9800;
            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
            top: 17px;
            right: -3px;
            transform: rotate(15deg);
            z-index: 1002;
            transform-origin: left center;
        }
        
        .leg {
            position: absolute;
            width: 4px;
            height: 25px;
            background: #ff9800;
            bottom: -10px;
        }
        
        .leg.left {
            left: 25px;
            transform: rotate(5deg);
        }
        
        .leg.right {
            left: 40px;
            transform: rotate(-5deg);
        }
        
        .foot {
            position: absolute;
            width: 15px;
            height: 5px;
            background: #ff9800;
            bottom: -5px;
            border-radius: 3px;
        }
        
        .foot.left {
            left: -7px;
            transform: rotate(-10deg);
        }
        
        .foot.right {
            right: -7px;
            transform: rotate(10deg);
        }
        
        .wing {
            position: absolute;
            width: 35px;
            height: 35px;
            background: #ffd54f;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            top: 30px;
            left: 17px;
            transform: rotate(-10deg);
            box-shadow: inset -2px -2px 4px rgba(0,0,0,0.1);
        }
        
        .walking .leg {
            animation: legMove 0.5s infinite alternate;
        }
        
        @keyframes legMove {
            0% { transform: rotate(5deg) translateY(0); }
            50% { transform: rotate(-5deg) translateY(-5px); }
            100% { transform: rotate(5deg) translateY(0); }
        }
        
        .walking .wing {
            animation: wingMove 0.5s infinite alternate;
        }
        
        @keyframes wingMove {
            0% { transform: rotate(-10deg) translateY(0); }
            100% { transform: rotate(-5deg) translateY(-3px); }
        }
        
        .eating {
            animation: eat 0.3s 3;
        }
        
        @keyframes eat {
            0% { transform: rotate(15deg); }
            50% { transform: rotate(0deg) scale(1.2); }
            100% { transform: rotate(15deg); }
        }
    </style>
</head>
<body>
    <div id="seed"></div>
    <div id="chicken">
        <div class="chicken-body"></div>
        <div class="wing"></div>
        <div class="chicken-head">
            <div class="eye"></div>
            <div class="beak" id="beak"></div>
        </div>
        <div class="leg left">
            <div class="foot left"></div>
        </div>
        <div class="leg right">
            <div class="foot right"></div>
        </div>
    </div>

    <script>
        const chicken = document.getElementById('chicken');
        const seed = document.getElementById('seed');
        const beak = document.getElementById('beak');
        let seedX = window.innerWidth / 2;
        let seedY = window.innerHeight / 2;
        let chickenX = seedX - 100;
        let chickenY = seedY - 100;
        let isMoving = false;
        let isEating = false;
        let stopTimer;
        let eatTimer;
        
        // موقعیت دانه ثابت می‌ماند
        seed.style.left = seedX + 'px';
        seed.style.top = seedY + 'px';
        
        document.addEventListener('mousemove', (e) => {
            seedX = e.clientX;
            seedY = e.clientY;
            seed.style.left = seedX + 'px';
            seed.style.top = seedY + 'px';
        });
        
        function animate() {
            const distX = seedX - (chickenX + 40);
            const distY = seedY - (chickenY + 30);
            const distance = Math.sqrt(distX * distX + distY * distY);
            
            if (distance > 15) {
                const speed = Math.min(distance / 8, 12);
                
                chickenX += distX / speed;
                chickenY += distY / speed;
                
                const angle = Math.atan2(distY, distX);
                if (angle > Math.PI/2 || angle < -Math.PI/2) {
                    chicken.style.transform = 'scaleX(-1)';
                } else {
                    chicken.style.transform = 'scaleX(1)';
                }
                
                if (isEating) {
                    isEating = false;
                    beak.classList.remove('eating');
                }
                
                isMoving = true;
                chicken.classList.add('walking');
                clearTimeout(stopTimer);
                stopTimer = setTimeout(() => {
                    isMoving = false;
                    chicken.classList.remove('walking');
                }, 300);
            } else {
                if (!isEating && !isMoving) {
                    isEating = true;
                    beak.classList.add('eating');
                    
                    clearTimeout(eatTimer);
                    eatTimer = setTimeout(() => {
                        beak.classList.remove('eating');
                    }, 1000);
                }
            }
            
            chicken.style.left = chickenX + 'px';
            chicken.style.top = chickenY + 'px';
            
            requestAnimationFrame(animate);
        }
        
        animate();
    </script>
</body>
</html>

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

نحوه استفاده

کد را در فایل HTML جدید کپی کنید.
آن را با مرورگر (Chrome, Firefox یا …) باز کنید.
نشانگر موس را حرکت دهید و از دنبال کردن آن توسط جوجه لذت ببرید!

نتیجه‌گیری

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

2025-07-19/0 دیدگاه /توسط admin

ساخت دکمه نئونی متحرک فقط با HTML و CSS (بدون جاوااسکریپت)

CSS

اگر دنبال راهی هستی که فقط با HTML و CSS یه دکمه چشم‌گیر و حرفه‌ای طراحی کنی، این آموزش مخصوص توئه.
در این مقاله یاد می‌گیری چطور با استفاده از conic-gradient و انیمیشن CSS، یک دکمه نئونی متحرک بسازی که توجه هر کاربری رو جلب می‌کنه – بدون حتی یک خط JavaScript!

کد HTML + CSS کامل

در ادامه کد کامل رو گذاشتم ، میتونی همین کد رو داخل برنامه ات استفاده کنی. توضیحات کاملش هم پایین تر گفتم.

<!DOCTYPE html>
<html>
<head>
<style>
.glow-button {
  position: relative;
  padding: 14px 32px;
  border: none;
  background: #111;
  color: #fff;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
}

.glow-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, #00f, #0ff, #0f0, #ff0, #f00, #f0f, #00f);
  animation: rotate 3s linear infinite;
  z-index: -2;
}

.glow-button::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background: #111;
  border-radius: 6px;
  z-index: -1;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
</head>
<body style="margin-top:300px;margin-left:250px">
 
<button class="glow-button">Click Me</button>

</body>
</html>

توضیح مراحل ساخت دکمه

1. ظاهر دکمه (کلاس .glow-button)
ما با یک پس‌زمینه تیره و متنی سفید کار رو شروع کردیم. گوشه‌های گرد، padding مناسب و بدون هیچ حاشیه ظاهری.

2. افکت نئونی متحرک با ::before
با conic-gradient یک حلقه رنگارنگ ایجاد کردیم و به‌کمک animation چرخشش دادیم تا یک افکت متحرک نئونی بسازیم.

3. ساخت بک‌گراند داخلی با ::after
یک لایه داخلی (زیر دکمه) قرار دادیم که ظاهر دکمه رو تمیز و واضح نگه‌داره، و افکت پشتش بدرخشه.

4. انیمیشن با @keyframes
تنها انیمیشن ما یک چرخش 360 درجه‌ای مداومه که حس داینامیک و حرکت به دکمه می‌ده.

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

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

نکات پایانی

می‌تونی این افکت رو با رنگ‌های دلخواهت شخصی‌سازی کنی.
مدت زمان انیمیشن یا ضخامت افکت رو هم می‌تونی با تغییر اندازه padding و ::after و ::before تنظیم کنی.

اگر سوالی داری توی کامنت های همین مقاله با ما در ارتباط باش.

2025-07-18/0 دیدگاه /توسط admin

بایگانی دسته ی CSS

کد HTML:

کد CSS:

کد JavaScript:

کد کامل:

جمع‌بندی:

ساخت دکمه دانلود با انیمیشن پیشرفت و وضعیت موفق با HTML و CSS

بخش اول: طراحی اولیه دکمه دانلود

کد HTML ابتدایی:

بخش دوم: استایل‌دهی کامل با CSS

رنگ‌ها و وضعیت‌ها

CSS کامل برای طراحی دکمه:

بخش سوم: افزودن رفتار دکمه با JavaScript

JavaScript برای مدیریت وضعیت دکمه:

کد کامل HTML آماده اجرا

نتیجه‌گیری

نظر شما چیه؟

هدف این مقاله

معرفی کد

بررسی ساختار HTML

بررسی CSS و طراحی ظاهری

پیش‌نمایش خروجی نهایی اسلایدر

مزایای این طراحی

نکات کلیدی سئو و تجربه کاربری

نحوه استفاده و شخصی‌سازی

نتیجه‌گیری

ویژگی‌های پروژه

نحوه عملکرد

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

کد کامل پروژه

نحوه استفاده

نتیجه‌گیری

کد HTML + CSS کامل

توضیح مراحل ساخت دکمه

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

نکات پایانی

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

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

ابر برچسب ها