CSS بٹن

ਸਿੱਖੋ ਕਿ ਕਿਵੇਂ ਕ੍ਰਿਸਟਲ ਸੈੱਟ ਬਟਨ ਸਟਾਈਲ ਸੈਟ ਕਰੋ।

基本按钮样式

مثال

.بٹن {
  background-color: #4CAF50; /* سبز */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

خود کو چھپا دیں

按钮颜色

از background-color 属性更改按钮的背景色：

مثال

.button1 {background-color: #4CAF50;} /* 绿色 */
.button2 {background-color: #008CBA;} /* 蓝色 */
.button3 {background-color: #f44336;} /* 红色 */ 
.button4 {background-color: #e7e7e7; color: black;} /* 灰色 */ 
.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 属性更改按钮的内边距：

مثال

.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%;}

خود کو چھپا دیں

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

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

مثال

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50; /* سبز */
}
...

خود کو چھپا دیں

دکمه‌های قابل مرور


زمانی که موس بر روی دکمه قرار می‌گیرد، از :hover انتخابگر می‌تواند سبک دکمه‌ها را تغییر دهد.

توجه:از transition-duration ویژگی برای تعیین سرعت اثر "مرور" استفاده کنید:

مثال

.بٹن {
  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);
}
.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

خود کو چھپا دیں

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

از شفافیت ویژگی برای اضافه کردن شفافیت به دکمه استفاده کنید (برای ایجاد ظاهر "غیرفعال").

توجه:شما همچنین می‌توانید یک ویژگی با مقدار "not-allowed" اضافه کنید cursor ویژگی، زمانی که موس را بر روی دکمه قرار می‌دهید، این ویژگی "no parking sign" (نشان ممنوعیت پارک) را نمایش می‌دهد:

مثال

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

خود کو چھپا دیں

عرض دکمه


به طور پیش‌فرض، اندازه دکمه بستگی به محتوای متن دارد (همانطور که عرض محتوا است). از عرض برای تغییر عرض دکمه، از ویژگی‌های زیر استفاده کنید:

مثال

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

خود کو چھپا دیں

گروپ دکمه‌ها

　

حذف ماژول خارجی و به هر دکمه اضافه کنید فلاؤٹ: لائف;، تاکہ بٹن گروپ بنائیں:

مثال

.بٹن {
  فلاؤٹ: لائف;
}

خود کو چھپا دیں

بوردر والے بٹن گروپ

　

استعمال بوردر بوردر پرپرٹی کا استعمال کریں تاکہ بوردر والے بٹن گروپ بنائیں:

مثال

.بٹن {
  فلاؤٹ: لائف;
  بوردر: 1 پیکسل سولڈ گرین;
}

خود کو چھپا دیں

ورتی بٹن گروپ

استعمال دسپلے: بلوک موضع فلاؤٹ: لائف; بٹن کو بائیں سمت سے بجائے اوپر سے گروپ کریں، نہ کہ ساتھ ساتھ:

مثال

.بٹن {
  دسپلے: بلوک;
}

خود کو چھپا دیں

انیمج پر بٹن

Coffee

خود کو چھپا دیں

انیمیشن بٹن

مثال 1

ماوس پر ہافوزن کے وقت ایک چینار کا اضافہ کریں:

خود کو چھپا دیں

مثال 2

ایک ‘پریس کیا جارہا’ ایفیکٹ کا اضافہ کریں:

خود کو چھپا دیں

مثال 3

ماوس پر ہافوزن کے وقت انیمیشن:

خود کو چھپا دیں

مثال 4

ایک ‘ریپل’ ایفیکٹ کا اضافہ کریں:

خود کو چھپا دیں