ایجاد دکمه در 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