ویرگول
ورودثبت نام
سیداحمد
سیداحمد
خواندن ۸ دقیقه·۱۰ ماه پیش

ساخت انیمیشن برای دکمه هنگام هاور کردن با موس

برای ساخت دکمه به دو فایل نیاز داریم: یکی html و دیگری css

شما میتوانید فونت دلخواه برای پروژه خودتان تنظیم کنید یا هیچ فونت دلخواهی تنظیم نکنید.

در همه دکمه های پیش رو در تنظیمات css از این کدها در ابتدای کد استفاده میکنیم:

* {
    margin:0; 
   padding: 0; 
   box-sizing: border-box;
}
body {    
    height: 100vh;
    background-color: #090909;
    display: grid;    
    place-items: center;
}

اولین پروژه ساخت انیمیشن هنگام هاور موس روی دکمه


یک فایل به نام Index.html بسازید:

<!DOCTYPE html>
<html lang=&quoten&quot>
<head>
<meta charset=&quotUTF-8&quot>
<meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot>
<title>Sample 1 of Button</title>
<link href=&quothttps://fonts.googleapis.com/css2?family=Bruno+Ace&display=swap&quot el=&quotstylesheet&quot>
<link href=&quothttps://fonts.googleapis.com/css2?family=Poppins&display=swap&quot rel=&quotstylesheet&quot>
<link rel=&quotstylesheet&quot href=&quotstyle.css&quot>
</head>
<body>
<button>Hover Me</button>
</body>
</html>

در فایل بالا تنها چیزهایی که اضافه کردیم اینها هستند:

اول تنظیم فونت:

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

در کادر قرمز رنگ، ابتدا از کادر اول که نوشته : To embed a font, copy the code into the <head> of your html این کدها را در قسمت فایل index.html در بین تگ head قرار میدهیم.

کادر دوم که نوشته: CSS rules to specify families را برای استفاده در فایل استایل style.css استفاده میکنیم.

دوم ایجاد یک دکمه در فایل index.html:

<button>Hover Me</button>

سوم تنظیم فایل استایل style.css:

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

body {
    height: 100vh;
    background-color: #090909;
    display: grid;
    place-items: center;
}

button {
    font-family: Poppins, &quotBruno Ace&quot
    border: 0;
    font-size:20px;
}

button {
    background-color: transparent;
    color: #8800b5;
    padding: 13px 36px;
    border: 2px solid #8800b5;
    border-radius: 8px;
    position: relative;
    z-index:1;
    overflow: hidden;
    transition: color 0.5s;
}

button:hover{
    color: white;
}

button:before {
    content: &quot&quot
    position: absolute;
    top: 100%;
    left: 100%;
    width: 120%;
    height: 220%;
    background-color: #8800b5;
    border-radius: 50%;
    z-index: -1;
    transition: all 0.6s ease;
}

button:hover:before {
    top: -50%;
    left: -10%;
}

اکنون به تفسیر کدها میپردازیم:

body {     
    height: 100vh;     
    background-color: #090909;     
    display: grid;     
   place-items: center; 
}


این کد برای تنظیم ارتفاع بدنه صفحه به ارتفاع کامل صفحه (100vh) استفاده می‌شود. این بدان معناست که بدنه صفحه به اندازه ارتفاع صفحه کاربر در نمایشگر تنظیم می‌شود.

سپس، با استفاده از خاصیت background-color، رنگ پس زمینه صفحه به سیاه (#090909) تنظیم می‌شود.

از خاصیت display: grid برای ایجاد یک شبکه درون صفحه استفاده می‌شود. این شبکه به اجزای موجود در صفحه کمک می‌کند تا به صورت محتوایی منظم و مرتب در صفحه قرار بگیرند.

و در نهایت، با استفاده از خاصیت place-items: center، اجزای موجود در صفحه به صورت مرکز قرار می‌گیرند.


button {
    font-family: Poppins, &quotBruno Ace&quot
    border: 0;
    font-size:20px;
}

این کد برای تنظیم فونت خانواده به Poppins و "Bruno Ace"، حذف حاشیه (بدون حاشیه)، و تنظیم اندازه فونت به 20 پیکسل استفاده می‌شود.

button {
    background-color: transparent;
    color: #8800b5;
    padding: 13px 36px;
    border: 2px solid #8800b5;
    border-radius: 8px;
    position: relative;
    z-index:1;
    overflow: hidden;
    transition: color 0.5s;
}
  • background-color: transparent;: رنگ پس زمینه دکمه را شفاف تنظیم می‌کند.
  • color: #8800b5;: رنگ متن دکمه را به بنفش (#8800b5) تنظیم می‌کند.
  • padding: 13px 36px;: فاصله‌دهی داخلی دکمه را با ابعاد 13 پیکسل از بالا و پایین و 36 پیکسل از چپ و راست تنظیم می‌کند.
  • border: 2px solid #8800b5;: حاشیه دکمه را با ضخامت 2 پیکسل و رنگ بنفش (#8800b5) تنظیم می‌کند.
  • border-radius: 8px;: شعاع گوشه‌های دکمه را به 8 پیکسل تنظیم می‌کند.
  • position: relative;: تنظیم وضعیت موقعیت دکمه به صورت نسبی.
  • z-index:1;: تنظیم عمق دکمه به 1.
  • overflow: hidden;: مخفی کردن محتوایی که از ابعاد دکمه بیشتر است.
  • transition: color 0.5s;: تنظیم انتقال رنگ متن دکمه به مدت 0.5 ثانیه.

این تنظیمات به منظور استایل‌دهی و ایجاد انیمیشن هنگام هاور بر روی دکمه استفاده می‌شوند.

button:hover{
    color: white;
}

این کد برای ایجاد یک دکمه به همراه انیمیشن هنگام هاور استفاده می‌شود.

button:before {
    content: &quot&quot
    position: absolute;
    top: 100%;
    left: 100%;
    width: 120%;
    height: 220%;
    background-color: #8800b5;
    border-radius: 50%;
    z-index: -1;
    transition: all 0.6s ease;
}

button:hover:before {
    top: -50%;
    left: -10%;
}
  • با استفاده از button:before، یک المان قبل از دکمه ایجاد می‌شود.
  • با تنظیم position: absolute;، المان قبل از دکمه به صورت مطلق قرار می‌گیرد.
  • با تنظیم top: 100%; و left: 100%;، المان قبل از دکمه را در پایان دکمه قرار می‌دهد.
  • با تنظیم width: 120%; و height: 220%;، ابعاد المان قبل از دکمه را تنظیم می‌کند تا بزرگتر از دکمه باشد.
  • با تنظیم background-color: #8800b5;، رنگ پس زمینه المان قبل از دکمه را به بنفش (#8800b5) تنظیم می‌کند.
  • با تنظیم border-radius: 50%;، شعاع گوشه‌های المان قبل از دکمه را به 50% تنظیم می‌کند.
  • با تنظیم z-index: -1;، عمق المان قبل از دکمه را به -1 تنظیم می‌کند تا پشت دکمه قرار بگیرد.
  • با تنظیم transition: all 0.6s ease;، تنظیم انتقال تمامی ویژگی‌های المان قبل از دکمه به مدت 0.6 ثانیه.
  • با استفاده از button:hover:before، وقتی کاربر ماوس را روی دکمه قرار می‌دهد، المان قبل از دکمه به موقعیت دلخواه منتقل می‌شود.

میتوانید این فایلها را در گیت هاب ببینید و ستاره دهید:

https://github.com/seyedahmaddv/buttons-hover-html-css/tree/main


دومین پروژه ساخت انیمیشن هنگام هاور موس روی دکمه

تصویر متحرک بالا را دیدی؟ خوب حالا برویم سراغ چنین دکمه ای که با حرکت موس روی آن، هم ایکون و هم محتوای آن تغییر میکند. انگار که یک دکمه جدید روی آن حرکت میکند.

در این فایلها از هیچ کد جاوا اسکریپتی استفاده نشده است.

ابتدا فایل index.html

<!DOCTYPE html>
<html lang=&quoten&quot>
<head>
    <meta charset=&quotUTF-8&quot>
    <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot>
    <title>Sample 2 of Button</title>
    <link rel=&quotstylesheet&quot href=&quothttps://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css&quot>
    <link rel=&quotstylesheet&quot href=&quotstyle.css&quot>
</head>
<body>
    <button>
        <div class=&quotdefault-btn&quot>
            <i class=&quotbi bi-download&quot></i>
            <span>Download</span>
        </div>
        <div class=&quothover-btn&quot>
            <i class=&quotbi bi-currency-dollar&quot></i>
            <span>For Free</span>
        </div>
    </button>
</body>
</html>

در کد بالا در بدنه body، یک تگ دکمه ایجاد کردیم. داخل تگ دکمه button، دو تگ div ایجاد کردیم.

در یکی از تگهای دیو div کلاس default-btn به عنوان تصویر دکمه پیشفرض بدون هاور موس و برای تگ دیو div دیگر: کلاس hover-btn به عنوان تصویر دکمه در زمانی که موس روی آن برده میشود ایجاد کردیم. البته ما در اینجا از عکس استفاده نمیکنیم و این که از کلمه تصویر دکمه استفاده کردیم برای سادگی انتقال مطلب بود.

سپس درون هر دو تگ دیو div، یک تگ i و یک تگ span ایجاد میکنیم.

در تگ دیو div اول با کلاس default-btn

از این کد : <i class="bi bi-download"></i> برای نمایش ایکون دانلود از ایکونهای بوت استرپ که در تگ هد فایل html تعریف کردیم استفاده کردیم.

از این کد <span>Download</span> صرفا برای نمایش متن دانلود استفاده کردیم.

در تگ دیو div دوم با کلاس hover-btn

از این کد: <i class="bi bi-currency-dollar"></i> برای نمایش ایکون دلار از ایکونهای بوت استرپ که در تگ هد فایل html تعریف کردیم استفاده کردیم.

از این کد <span>For Free</span> صرفا برای نمایش متن به رایگان استفاده کردیم.

ایجاد فایل استایل برای دکمه دوم دانلود و به رایگان

به فایل زیر توجه کنید:

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;1,300&display=swap');

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

body {
    height: 100vh;
    background-color: #090909;
    display: grid;
    place-items: center;
}

button {
    border: 0;
    color: white;
    font-size: 1.5rem;
    font-family: Poppins;
    cursor: pointer;
}

button {
    background-color: hsl(208, 58%, 50%);
    border-radius: 50px;
    position: relative;
    overflow: hidden;
}

.default-btn,
.hover-btn {
    padding: 12px 24px;
    border-radius: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    text-transform: uppercase;
    transition: 0.4s ease;
}

.hover-btn {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: hsl(208, 76%, 40%);
    transform: translate(0%, 100%);
}

button:hover .hover-btn {
    transform: translate(0%, 0%);
}

button:hover .default-btn {
    transform: translate(0%, -100%);
}

این کد CSS یک صفحه وب را استایل دهی می‌کند و از فونت Poppins استفاده می‌کند که از سرویس Google Fonts فراخوانی شده است. دستور اتساین import برای وارد کردن فونت به کد CSS استفاده شده است.

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;1,300&display=swap');

باقی کد، ویژگی‌های ظاهری صفحه را تنظیم می‌کند:

1. `*`:

- مشخص کننده‌ی تمام المان‌ها (هر چیزی که با `*` انتخاب شود)، تنظیماتی اعمال می‌کند که حاصل از محاسبه‌ی فاصله‌ها (`margin`)، اضافه کردن پدینگ (`padding`) و محاسبه‌ی ابعاد با در نظر گرفتن حاشیه‌ها (`box-sizing`) است.

2. `body`:

- این المان، تنظیمات مربوط به صفحه اصلی را تعیین می‌کند.

- ارتفاع (`height`) برابر با ۱۰۰ درصد از ارتفاع نمایشگر (viewport) است.

- رنگ پس زمینه (`background-color`) سیاه (#090909) است.

- با استفاده از `grid` و `place-items`، محتوا به وسیله‌ی گرید در وسط نمایش داده می‌شود.


3. `button`:

- تعیین خصوصیات کلی دکمه‌ها.

- حذف حاشیه و پدینگ (`margin: 0; padding: 0`) و تنظیم مربع مرزی (`box-sizing: border-box`) روی تمام المان‌ها.

- رنگ متن (`color`) سفید و اندازه‌ی فونت (`font-size`) ۱.۵ رم است.

- از فونت Poppins برای متن استفاده می‌کند.

اکنون به کلاسهای تعریف شده برای دیو div میپردازیم:

4. `.default-btn` و `.hover-btn`:

- تنظیمات مربوط به حالت عادی و هاور دکمه(هاور : وقتی ماوس روی دکمه است) .

- `padding`، `border-radius`، `display`، `justify-content` و `align-items` برای هر دو کلاس یکسان هستند.

- `text-transform: uppercase` متن دکمه را به حروف بزرگ تبدیل می‌کند.

- `transition: 0.4s ease` تنظیمات انیمیشن هاور را اعمال می‌کند.

در این قسمت از عکس خصوصیات کلی این دو کلاس تعیین میشود
در این قسمت از عکس خصوصیات کلی این دو کلاس تعیین میشود

5. `.hover-btn`:

- در حالت هاور، این المان به صورت مطلق (position: absolute; inset: 0) در داخل دکمه قرار داده می‌شود.

- رنگ پس زمینه آن تغییر می‌کند (`background-color: hsl(208, 76%, 40%)`) و با `transform` به پایین (100%) حرکت می‌کند.

در این تکه از کد، خصوصیات جداگانه برای کلاس hover-btn تعریف میشود
در این تکه از کد، خصوصیات جداگانه برای کلاس hover-btn تعریف میشود

6. `button:hover .hover-btn` و `button:hover .default-btn`:

- در حالت هوور، با استفاده از `:hover`، انیمیشن‌های ترکیبی اعمال می‌شوند. متن دکمه به بالا (-100%) حرکت می‌کند و المان مطلق درون دکمه به پایین (0%) حرکت می‌کند.


ایجاد انیمیشن دکمهدکمه در css
سیداحمد
سیداحمد
امیدوارم به بهتر شدن کمک کنم. در تلگرام و اینستاگرام پیام بفرست، SeyedAhmaddv - ارشد نرم افزار، توسعه دهنده ری اکت و نکست
شاید از این پست‌ها خوشتان بیاید