CSS Styling Buttons

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

—

 استایل‌دهی به دکمه‌ها در CSS

 1. استایل پایه برای دکمه

“`css
button {
background-color: #007bff;            /* رنگ پس‌زمینه */
color: white;               /* رنگ متن */
padding: 10px 20px;             /* فاصله داخلی بالا/پایین و چپ/راست */
border: none;            /* حذف خط دور */
border-radius: 5px;           /* گوشه‌های گرد */
font-size: 16px;            /* اندازه فونت */
cursor: pointer;         /* نشانگر دست هنگام هاور */
transition: background-color 0.3s ease;          /* انیمیشن تغییر رنگ */
}
“`

2. اضافه کردن افکت‌ها به هاور و فوکوس

“`css
button:hover {
background-color: #0056b3; /* رنگ پس‌زمینه هنگام هاور */
}

button:focus {
outline: none;       /* حذف کادر پیش‌فرض فوکوس */
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);      /* کادر آبی دور دکمه */
}
“`

 3. دکمه‌های فعال (active)

“`css
button:active {
background-color: #004085;
transform: scale(0.98); /* کوچک شدن کمی دکمه هنگام کلیک */
}
“`

 4. دکمه با استایل خاص (مثلا دکمه‌ی گرد)

“`css
.round-btn {
border-radius: 50%; /* دکمه گرد */
width: 50px;
height: 50px;
padding: 0;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
}
“`

—

 مثال کامل

“`html
<button>دکمه ساده</button>
<button class=“round-btn”>+</button>
“`

“`css
button {
background-color: #28a745;
color: white;
padding: 12px 25px;
border: none;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.25s ease;
}

button:hover {
background-color: #218838;
}

button:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.5);
}

button:active {
background-color: #1e7e34;
transform: scale(0.97);
}

.round-btn {
border-radius: 50%;
width: 50px;
height: 50px;
padding: 0;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}
“`

—

 نکات تکمیلی

* می‌تونی از فونت‌آیکون (مثل Font Awesome) داخل دکمه استفاده کنی.
* دکمه‌ها رو می‌شه با `box-shadow` و `text-shadow` جذاب‌تر کرد.
* استفاده از `transition` باعث نرم و زیبا شدن تغییرات حالت‌ها می‌شه.
* اگر دکمه توی فرم هست، حتما `type=”button”` یا `type=”submit”` رو بهش اضافه کن.