دکمه‌ها (<button> و <input type="button">) یکی از مهم‌ترین عناصر در طراحی وب هستند که برای انجام عملیات مختلف مانند ارسال فرم، پیمایش صفحات و تعاملات کاربری استفاده می‌شوند.

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

۱. استایل پایه دکمه‌ها در CSS

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

button {
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

/* تغییر رنگ هنگام هاور */
button:hover {
    background-color: #0056b3;
}

✅ نتیجه:

• دکمه دارای رنگ آبی است.
• با border-radius: 5px; گوشه‌های دکمه گرد شده‌اند.
• هنگام هاور، رنگ پس‌زمینه تغییر می‌کند.

۲. استایل‌دهی به دکمه‌های Outline (حاشیه‌دار)

دکمه‌های Outline بدون پس‌زمینه هستند و فقط دارای حاشیه می‌باشند.

.button-outline {
    background: none;
    border: 2px solid #007bff;
    color: #007bff;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* تغییر رنگ هنگام هاور */
.button-outline:hover {
    background-color: #007bff;
    color: white;
}

✅ نتیجه:

• دکمه دارای حاشیه آبی و بدون پس‌زمینه است.
• هنگام هاور، پس‌زمینه پر شده و رنگ متن تغییر می‌کند.

۳. دکمه‌های گرد و دایره‌ای

با استفاده از border-radius: 50%; می‌توان دکمه‌های دایره‌ای ایجاد کرد.

.button-circle {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 15px;
    font-size: 16px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* تغییر رنگ هنگام هاور */
.button-circle:hover {
    background-color: #218838;
}

✅ نتیجه:

• دکمه کاملاً گرد شده است.
• اندازه آن برابر 50px × 50px است.
• هنگام هاور، رنگ آن کمی تیره‌تر می‌شود.

۴. دکمه‌های دارای سایه (Shadowed Button)

افزودن سایه به دکمه باعث جذابیت بیشتر آن می‌شود.

.button-shadow {
    background-color: #ffc107;
    color: black;
    padding: 12px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease-in-out;
}

/* تغییر سایه هنگام هاور */
.button-shadow:hover {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

✅ نتیجه:

• دکمه دارای سایه نرم است.
• هنگام هاور، شدت سایه افزایش پیدا می‌کند.

۵. دکمه با افکت گرادینت (Gradient Button)

گرادینت باعث ایجاد یک دکمه مدرن و جذاب می‌شود.

.button-gradient {
    background: linear-gradient(45deg, #ff416c, #ff4b2b);
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s;
}

/* ایجاد افکت هنگام کلیک */
.button-gradient:active {
    transform: scale(0.95);
}

✅ نتیجه:

• دکمه دارای پس‌زمینه گرادینت (دو رنگی) است.
• هنگام کلیک، دکمه کمی کوچک‌تر می‌شود (افکت فشردن).

۶. دکمه‌های دارای انیمیشن مرز (Border Animation)

می‌توان دکمه‌هایی با حاشیه متحرک ایجاد کرد.

.button-border {
    position: relative;
    background: none;
    color: #ff416c;
    padding: 12px 20px;
    font-size: 16px;
    border: 2px solid #ff416c;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.3s;
}

/* افکت هنگام هاور */
.button-border::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ff416c;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-in-out;
    z-index: -1;
}

/* هنگام هاور، پس‌زمینه گسترش می‌یابد */
.button-border:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.button-border:hover {
    color: white;
}

✅ نتیجه:

• هنگام هاور، یک افکت متحرک روی حاشیه ظاهر می‌شود.
• متن سفید شده و پس‌زمینه رنگ می‌گیرد.

۷. دکمه‌های واکنش‌گرا (Responsive Buttons)

برای اطمینان از اینکه دکمه‌ها در همه دستگاه‌ها واکنش‌گرا باشند، می‌توان از width: 100% در موبایل استفاده کرد.

@media (max-width: 768px) {
    button {
        width: 100%;
        padding: 14px;
    }
}

✅ نتیجه:

• در صفحه‌های کوچک، دکمه تمام عرض را اشغال می‌کند.

۸. نتیجه‌گیری

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