CSS – دکمه‌ها (Buttons)

استایل اولیه دکمه‌ها

می‌توانید با CSS دکمه‌های خود را استایل‌دهی کنید. در اینجا یک مثال ساده از استایل‌دهی دکمه آورده شده است:

.button {
  background-color: #04AA6D; /* سبز */
  border: none;
  color: سفید;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

تغییر رنگ دکمه‌ها

با استفاده از ویژگی background-color می‌توانید رنگ پس‌زمینه دکمه‌ها را تغییر دهید:

.button1 {background-color: #04AA6D;} /* سبز */
.button2 {background-color: #008CBA;} /* آبی */
.button3 {background-color: #f44336;} /* قرمز */
.button4 {background-color: #e7e7e7; color: سیاه;} /* خاکستری */
.button5 {background-color: #555555;} /* سیاه */

اندازه دکمه‌ها

با استفاده از ویژگی font-size می‌توانید اندازه فونت دکمه‌ها را تغییر دهید:

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

و برای تغییر اندازه padding دکمه‌ها از ویژگی padding استفاده کنید:

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

دکمه‌های گرد

برای اضافه کردن گوشه‌های گرد به دکمه‌ها از ویژگی border-radius استفاده کنید:

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

دکمه‌های دارای حاشیه رنگی

برای اضافه کردن حاشیه‌های رنگی به دکمه‌ها از ویژگی border استفاده کنید:

.button1 {
  background-color: سفید;
  color: سیاه;
  border: 2px solid #04AA6D; /* سبز */
}

دکمه‌های واکنش‌گرا (Hover)

برای تغییر استایل دکمه هنگام حرکت ماوس از ویژگی :hover استفاده کنید:

.button {
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #04AA6D; /* سبز */
  color: سفید;
}

دکمه‌های سایه‌دار

برای اضافه کردن سایه به دکمه‌ها از ویژگی box-shadow استفاده کنید:

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

دکمه‌های غیرفعال

برای اضافه کردن شفافیت به دکمه و ایجاد ظاهری غیرفعال از ویژگی opacity استفاده کنید:

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

تنظیم عرض دکمه‌ها

برای تغییر عرض دکمه‌ها از ویژگی width استفاده کنید:

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

گروه‌بندی دکمه‌ها

برای ایجاد یک گروه از دکمه‌ها از ویژگی float:left استفاده کنید:

.button {
  float: left;
}

دکمه‌های گروه‌بندی شده با حاشیه

برای اضافه کردن حاشیه به گروه دکمه‌ها:

.button {
  float: left;
  border: 1px solid سبز;
}

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

برای قرار دادن دکمه‌ها به صورت عمودی از ویژگی display:block استفاده کنید:

.button {
  display: block;
}

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

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

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.