استایل اولیه دکمه‌ها
می‌توانید با 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;
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام