ການສະແດງການຈັດສັບບັນຫາ CSS
- Try It Yourself ການສະແດງການກວດກາ CSS
- Previous Page ການສະແດງການຈັດສັບສອງຫມາຍ 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;
ສີທີ່ຫຼັງ
ຂໍ້ສະເໜີ 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;} /* ສີດຳ */
ຂະໜາດວຽກຕິດຕັ້ງ
ຂໍ້ສະເໜີ 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;}
ຂໍ້ສະເໜີ 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;}
ວຽກຕິດຕັ້ງບວມບາຍບໍ່ບາງບານ
ຂໍ້ສະເໜີ 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%;}
ຊັ້ນບາດບັນຕັດສີສີຂຽວ
ຂໍ້ສະເໜີ Bordered Button Group
ທິດສະດີທີ່ຈະເພີ່ມຊັ້ນບາດບັນຕັດ
Group buttons vertically instead of horizontally:
.button1 { background-color: white; color: black; border: 2px solid #4CAF50; /* Green */ display: block; ...
ບັນຕັດທີ່ສາມາດຢູ່ພາຍໃນ
ທີ່ມືຂອງທ່ານຈະຢູ່ພາຍໃນບັນຕັດ :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; ...
ບັນຕັດຊັ້ນກາງ
ຂໍ້ສະເໜີ 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;
ບັນຕັດທີ່ຖືກລະງັບ
ຂໍ້ສະເໜີ opacity
ທິດສະດີທີ່ຈະເພີ່ມຄວາມຜ່ອນຂອງບັນຕັດ (ສ້າງປະກອບຕົວ "ບໍ່ສາມາດໃຊ້").
ຂໍ້ສັງເກດທ່ານສາມາດເພີ່ມຕົວປະເພດ "not-allowed" cursor
ທິດສະດີທີ່ຈະສະແດງ "no parking sign" (ສັນຍາບັນຕັດ) ເມື່ອທ່ານຈະປ່ຽນຕົວມືຂອງມັນຕະຫຼອດຕົວ
Group buttons vertically instead of horizontally:
.disabled { opacity: 0.6; cursor: not-allowed; display: block;
ວັດຖຸບັນຕັດ
ໂດຍປົກກະຕິບັນຫາຂະໜາດບັນຕັດຈະຕິດຕາມຂະໜາດຂອງຄວາມຄິດ (ຄືກັບຂະໜາດຂອງຄວາມຄິດ). ຂໍ້ສະເໜີ width
ການປ່ຽນວັດຖຸລະຫວ່າງບັນຕັດໂດຍການແກ້ໄຂທິດສະດີ
Group buttons vertically instead of horizontally:
.button1 {width: 250px;} .button2 {width: 50%;} .button3 {width: 100%;}
ການຈັດກຸ່ມບັນຕັດ
ລົບຂໍ້ຜ່ອນຫຼັງແລະເພີ່ມບັນຫາຫຼັກຕິດຕັ້ງບັນຕັດ Replace
,来创建按钮组:
Group buttons vertically instead of horizontally:
Example Attribute to create bordered button groups: display: block;
,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;
border: 1px solid green;
Vertical Button Group Use
display:block Replace
float:left
Group buttons vertically instead of horizontally:
Example .button { display: block;
Button
Animated Button
Example 1
Hover Mouse
Example 2
Add a 'Key Pressed' Effect When Clicked:
Example 3
Hover Fade In
Example 4
- Try It Yourself ການສະແດງການກວດກາ CSS
- Previous Page ການສະແດງການຈັດສັບສອງຫມາຍ CSS