ການສະແດງການຈັດສັບບັນຫາ CSS

ສຶກສາການນຳໃຊ້ CSS ຂັບເຄື່ອງຈະກົບພິມບັນນາທິດ。

ວຽກຕິດຕັ້ງພື້ນຖານ

Group buttons vertically instead of horizontally:

Example
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
display: block;

Click the Mouse

ສີທີ່ຫຼັງ

ຂໍ້ສະເໜີ background-color ປະກອບການປ່ຽນສີທີ່ຫຼັງວຽກຕິດຕັ້ງ:

Group buttons vertically instead of horizontally:

.button1 {background-color: #4CAF50;} /* ສີຂຽວ */
.button2 {background-color: #008CBA;} /* ສີຂຽວ */
.button3 {background-color: #f44336;} /* ສີສີເຂົ້າ */ 
.button4 {background-color: #e7e7e7; color: black;} /* ສີຂຽວ */ 
.button5 {background-color: #555555;} /* ສີດຳ */

Click the Mouse

ຂະໜາດວຽກຕິດຕັ້ງ

ຂໍ້ສະເໜີ font-size ປະກອບການປ່ຽນຂອງວຽກຕິດຕັ້ງຂອງຄຳຕາມ:

Group buttons vertically instead of horizontally:

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

Click the Mouse

ຂໍ້ສະເໜີ padding ປະກອບການປ່ຽນການກະຈາຍຂອງວຽກຕິດຕັ້ງ:

Group buttons vertically instead of horizontally:

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

Click the Mouse

ວຽກຕິດຕັ້ງບວມບາຍບໍ່ບາງບານ

ຂໍ້ສະເໜີ border-radius ປະກອບການສະແດງວຽກຕິດຕັ້ງ:

Group buttons vertically instead of horizontally:

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

Click the Mouse

ຊັ້ນບາດບັນຕັດສີສີຂຽວ

ຂໍ້ສະເໜີ Bordered Button Group ທິດສະດີທີ່ຈະເພີ່ມຊັ້ນບາດບັນຕັດ

Group buttons vertically instead of horizontally:

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50; /* Green */
display: block;
...

Click the Mouse

ບັນຕັດທີ່ສາມາດຢູ່ພາຍໃນ


ທີ່ມືຂອງທ່ານຈະຢູ່ພາຍໃນບັນຕັດ :hover ການເລືອກຕັ້ງທີ່ຈະປ່ຽນທິດສະດີບັນຕັດ

ຂໍ້ສັງເກດຂໍ້ສະເໜີ transition-duration ທິດສະດີທີ່ຈະກຳນົດຄວາມໄວຂອງປະຕິບັດ "ຢູ່ພາຍໃນ"

Group buttons vertically instead of horizontally:

Example
  transition-duration: 0.4s;
display: block;
.button:hover {
  background-color: #4CAF50; /* Green */
  color: white;
display: block;
...

Click the Mouse

ບັນຕັດຊັ້ນກາງ

ຂໍ້ສະເໜີ box-shadow ທິດສະດີທີ່ຈະເພີ່ມຊັ້ນກາງບັນຕັດ

Group buttons vertically instead of horizontally:

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
display: block;
.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
display: block;

Click the Mouse

ບັນຕັດທີ່ຖືກລະງັບ

ຂໍ້ສະເໜີ opacity ທິດສະດີທີ່ຈະເພີ່ມຄວາມຜ່ອນຂອງບັນຕັດ (ສ້າງປະກອບຕົວ "ບໍ່ສາມາດໃຊ້").

ຂໍ້ສັງເກດທ່ານສາມາດເພີ່ມຕົວປະເພດ "not-allowed" cursor ທິດສະດີທີ່ຈະສະແດງ "no parking sign" (ສັນຍາບັນຕັດ) ເມື່ອທ່ານຈະປ່ຽນຕົວມືຂອງມັນຕະຫຼອດຕົວ

Group buttons vertically instead of horizontally:

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
display: block;

Click the Mouse

ວັດຖຸບັນຕັດ


ໂດຍປົກກະຕິບັນຫາຂະໜາດບັນຕັດຈະຕິດຕາມຂະໜາດຂອງຄວາມຄິດ (ຄືກັບຂະໜາດຂອງຄວາມຄິດ). ຂໍ້ສະເໜີ width ການປ່ຽນວັດຖຸລະຫວ່າງບັນຕັດໂດຍການແກ້ໄຂທິດສະດີ

Group buttons vertically instead of horizontally:

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

Click the Mouse

ການຈັດກຸ່ມບັນຕັດ

 

ລົບຂໍ້ຜ່ອນຫຼັງແລະເພີ່ມບັນຫາຫຼັກຕິດຕັ້ງບັນຕັດ Replace,来创建按钮组:

Group buttons vertically instead of horizontally:

Example
  Attribute to create bordered button groups:
display: block;

Click the Mouse

,to create button groups:

 

Vertical Button Group Bordered Button Group border

Group buttons vertically instead of horizontally:

Example
  Attribute to create bordered button groups:
  float: left;
display: block;

Click the Mouse

border: 1px solid green;

Vertical Button Group Use display:block Replace float:left

Group buttons vertically instead of horizontally:

Example
  .button {
display: block;

Click the Mouse

}

Coffee

Click the Mouse

Button

Animated Button

Example 1

Click the Mouse

Hover Mouse

Example 2

Click the Mouse

Add a 'Key Pressed' Effect When Clicked:

Example 3

Click the Mouse

Hover Fade In

Example 4

Click the Mouse