ایجاد نمودار با Css
اردیبهشت ۱۹, ۱۴۰۳
شبه عنصر (Pseudo-Elements) در Css
اردیبهشت ۱۹, ۱۴۰۳
یکی از زبان‌های برنامه نویسی در طراحی سایت، css است. در این بخش از آموزش css قصد داریم نحوه ایجاد دکمه در css را برای شما علاقه‌مندان به آموزش طراحی سایت، شرح دهیم پس با ما همراه باشید.
رنگ دکمه
برای تنظیم رنگ دکمه در طراحی سایت از ویژگی “background-color” استفاده می‌کنیم. این ویژگی در واقع برای تنظیم رنگ پس زمینه دکمه در طراحی سایت مورد استفاده قرار میگیرد. در مثال زیر برای سه دکمه رنگ‌های سبز، آبی و قرمز تعیین کرده‌ایم:
.button1 {background-color: #4CAF50;} /* سبز */
.button2 {background-color: #008CBA;} /* آبی */
.button3 {background-color: #f44336;} /* قرمز */
اندازه دکمه
برای تعیین اندازه دکمه در طراحی سایت با css از تابع “font-size” استفاده می‌کنیم. این ویژگی به منظور تعیین اندازه فونت است که به همان نسبت اندازه دکمه نیز کوچک و یا بزرگ می‌شود. به مثال زیر توجه کنید:
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
گوشه‌های گرد دکمه
برای گرد کردن گوشه ها در طراحی سایت، ساختار “border-radius” به کار می‌رود. هرچه مقدار اعمال شده به این تابع بیشتر باشد، دکمه بیشتر حالت دایره پیدا می‌کند:
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
حاشیه رنگی در دکمه
به منظور اضافه کردن رنگ به حاشیه دکمه‌ها از ویژگی “border” استفاده کنید. مانند مثال زیر:
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* سبز */
}
ایجاد هاور برای دکمه
برای تغییر سبک دکمه زمانی که موس بر روی آن قرار میگیرد، باید از سلکتور “hover:” استفاده کنید. برای تعیین سرعت هاور نیز باید از تابع “transition-duration” استفاده شود، مانند مثال ذیل:
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* سبز */
color: white;
}
ایجاد سایه برای دکمه
برای این منظور در طراحی سایت باید از ویژگی “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);
}
غیرفعال کردن دکمه
برای غیر فعال کردن دکمه می‌توان ویژگی “opacity” را به کار برد. این ویژگی یک ظاهر غیرقابل دسترس به دکمه می‌دهد. علاوه بر این می‌توانید با استفاده از ویژگی “cursor” و اعمال مقدار “not-allowed” به آن، دکمه‌ای را ایجاد کنید که در هنگام قرار گرفتن موس بر روی دکمه علامت “no parking” را به شما نمایش دهد.
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
عرض دکمه
به طور پیش فرض عرض دکمه توسط محتوای آن تعیین می‌شود و هرچه محتوای دکمه بیشتر باشد، عرض آن نیز بیشتر می‌شود. حال شما می‌توانید با به کارگیری خاصیت “width”، عرض دکمه را تعیین کنید. مقدار این ویژگی برحسب درصد بیان می‌شود.
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
ایجاد دکمه های گروهی (Button Groups)
شما می‌توانید در طراحی سایت با برداشتن حاشیه (margin) در دکمه‌ها و اضافه کردن “float:left” به هریک از آنها، دکمه‌های گروی طراحی کنید.
.button {
float: left;
}
