ایجاد دکمه در 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;
}
منبع: sitedesign-co.com
سایر مقالات مرتبط :
- افزایش سرعت سایت های شلوغ
- معرفی دستگاه ماینر واتس ماینر Whatsminer M32 68Th
- وب سرور چیست؛ هر آنچه باید از وب سرور بدانید!
- روش کار با php unit test
- برنامه نویسی اندروید و همه چیز درباره آن
- بهترین مدل مانتو شلوار اداری برای مصاحبه شغلی
- آفر ویژه تورتایلند 7شب را در لحظه آخر ببینید
- آشنایی با بهترین نرم افزار CRM
- بررسی بروکرهای کارگزاریهای آلپاری فارکس و فیبوگروپ
- نکات کاربردی در مورد طراحی ویلا
- خدمات آرایشگاه داماد تهران بکس
- مقایسه بهترین برندهای اینورتر و درایو