ວິທີສ້າງປຸ່ມ Call to Action (CTA) ງາມໆ ແລະ ດຶງດູດລູກຄ້າດ້ວຍ HTML/CSS

ບົດນຳ

ໃນໂລກຂອງການເຮັດເວັບໄຊ, "ປຸ່ມກົດ" ຫຼື Call to Action (CTA) ບໍ່ແມ່ນພຽງແຕ່ສ່ວນປະກອບໜຶ່ງຂອງໜ້າເວັບເທົ່ານັ້ນ, ແຕ່ມັນຄືປະຕູດ່ານສຸດທ້າຍທີ່ຈະປ່ຽນຜູ້ເຂົ້າຊົມໃຫ້ກາຍມາເປັນລູກຄ້າ. ປຸ່ມທີ່ສວຍງາມ, ໂດດເດັ່ນ ແລະ ໜ້າກົດ ຈະຊ່ວຍເພີ່ມຍອດຂາຍໃຫ້ທ່ານໄດ້ຢ່າງຊັດເຈນ. ໃນບົດຄວາມນີ້, ເຮົາຈະມາສອນວິທີສ້າງປຸ່ມ CTA ແບບທັນສະໄໝ ທີ່ມີເອັບເຟັກເວລາເອົາເມົ້າໄປຊີ້ (Hover Effect) ໂດຍໃຊ້ພຽງແຕ່ HTML ແລະ CSS ພື້ນຖານ ໂດຍບໍ່ຕ້ອງເພິ່ງພາ Library ໃດໆເລີຍ.

1. ໂຄງສ້າງ HTML ພື້ນຖານ

ເລີ່ມຕົ້ນດ້ວຍການສ້າງໂຄງສ້າງ HTML ສຳລັບປຸ່ມກົດຂອງເຮົາ. ເຮົາຈະໃຊ້ tag <a> (Anchor tag) ເພື່ອໃຫ້ມັນສາມາດກົດແລ້ວລິ້ງໄປໜ້າອື່ນໄດ້, ພ້ອມກັບກຳນົດ class ເພື່ອເອົາໄວ້ເອີ້ນໃຊ້ໃນ CSS.

<!-- ສ້າງປຸ່ມໂດຍໃຊ້ tag <a> ພ້ອມຕັ້ງຊື່ class ວ່າ cta-button -->
<a href="#" class="cta-button">
  ສັ່ງຊື້ສິນຄ້າເລີຍ
</a>

ໃນໂຄ້ດນີ້ ເຮົາຕັ້ງຊື່ class ວ່າ cta-button. ສ່ວນ href="#" ແມ່ນໃສ່ໄວ້ເປັນຕົວແທນຂອງລິ້ງຈິງ (ເວລາທ່ານນຳໄປໃຊ້ຈິງ ໃຫ້ປ່ຽນ # ເປັນ URL ຂອງໜ້າທີ່ຕ້ອງການໃຫ້ລິ້ງໄປຫາ).

2. ຕົບແຕ່ງປຸ່ມໃຫ້ສວຍງາມດ້ວຍ CSS

ຕອນນີ້ປຸ່ມຂອງເຮົາຍັງເປັນພຽງຕົວໜັງສືສີຟ້າທຳມະດາ. ຕໍ່ໄປເຮົາຈະມາໃຊ້ CSS ເພື່ອປ່ຽນມັນໃຫ້ເປັນປຸ່ມທີ່ໂດດເດັ່ນ ແລະ ທັນສະໄໝ.

/* ກຳນົດຮູບແບບພື້ນຖານຂອງປຸ່ມ */
.cta-button {
  /* ຈັດຮູບແບບເປັນ block ໃຫ້ສາມາດກຳນົດຂະໜາດໄດ້ */
  display: inline-block;
  /* ກຳນົດສີພື້ນຫຼັງ (ສີຟ້າແບບທັນສະໄໝ) */
  background-color: #2563eb;
  /* ສີຕົວໜັງສື (ສີຂາວ) */
  color: #ffffff;
  /* ກຳນົດໄລຍະຫ່າງພາຍໃນປຸ່ມ (ເທິງ/ລຸ່ມ 15px, ຊ້າຍ/ຂວາ 30px) */
  padding: 15px 30px;
  /* ລຶບເສັ້ນກ້ອງຂອງ tag <a> ອອກ */
  text-decoration: none;
  /* ຄວາມໜາ ແລະ ຂະໜາດຕົວໜັງສື */
  font-weight: bold;
  font-size: 16px;
  /* ລົບລ່ຽມປຸ່ມໃຫ້ມົນຂຶ້ນ */
  border-radius: 8px;
  /* ເພີ່ມເງົາໃຫ້ປຸ່ມເບິ່ງມີມິຕິ */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* ເຮັດໃຫ້ການປ່ຽນແປງຕອນ Hover ນຸ່ມນວນຂຶ້ນ (ໃຊ້ເວລາ 0.3 ວິນາທີ) */
  transition: all 0.3s ease;
}

ຈຸດສຳຄັນໃນໂຄ້ດນີ້ຄືການໃຊ້ border-radius ເພື່ອເຮັດໃຫ້ປຸ່ມມົນ, ການໃຊ້ box-shadow ເພື່ອສ້າງເງົາໃຫ້ປຸ່ມເບິ່ງຄືພົ້ນອອກມາຈາກໜ້າຈໍ, ແລະ transition ເຊິ່ງຈະເປັນຕົວຊ່ວຍສຳຄັນໃນຂັ້ນຕອນຕໍ່ໄປ.

3. ເພີ່ມ Hover Effect (ເມື່ອເອົາເມົ້າຊີ້)

ເພື່ອໃຫ້ປຸ່ມເບິ່ງມີຊີວິດຊີວາ ແລະ ຕອບສະໜອງຕໍ່ຜູ້ໃຊ້, ເຮົາຈະເພີ່ມ Effect ບາງຢ່າງເຂົ້າໄປເມື່ອມີຄົນເອົາເມົ້າໄປວາງໄວ້ເທິງປຸ່ມ.

/* ກຳນົດ Effect ເມື່ອເອົາເມົ້າໄປຊີ້ປຸ່ມ (Hover) */
.cta-button:hover {
  /* ປ່ຽນສີພື້ນຫຼັງໃຫ້ເຂັ້ມຂຶ້ນເລັກນ້ອຍ */
  background-color: #1d4ed8;
  /* ຍູ້ປຸ່ມລອຍຂຶ້ນເທິງໜ້ອຍໜຶ່ງ */
  transform: translateY(-2px);
  /* ເພີ່ມຂະໜາດເງົາໃຫ້ກວ້າງຂຶ້ນ */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* ກຳນົດ Effect ເມື່ອກົດປຸ່ມ (Active) */
.cta-button:active {
  /* ຍຸບປຸ່ມລົງເພື່ອກຳລັງຖືກກົດ */
  transform: translateY(0);
  /* ຫຼຸດເງົາລົງຄືນ */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

ເມື່ອເອົາເມົ້າຊີ້ transform: translateY(-2px) ຈະເຮັດໃຫ້ປຸ່ມລອຍຂຶ້ນ ແລະ ເມື່ອກົດ active ປຸ່ມຈະຍຸບລົງມາຄືນ. ລູກຫຼິ້ນນ້ອຍໆເຫຼົ່ານີ້ຈະຊ່ວຍເພີ່ມປະສົບການການນຳໃຊ້ (UX) ທີ່ດີໃຫ້ກັບລູກຄ້າຂອງທ່ານໄດ້ຢ່າງບໍ່ໜ້າເຊື່ອ.

ພຽງແຕ່ໃຊ້ HTML ແລະ CSS ງ່າຍໆບໍ່ຈັກແຖວ, ທ່ານກໍສາມາດສ້າງປຸ່ມ Call to Action ທີ່ສວຍງາມ ແລະ ເປັນມືອາຊີບໄດ້ແລ້ວ. ຢ່າລືມນຳໄປປັບປ່ຽນສີສັນ (background-color) ໃຫ້ເຂົ້າກັບສີແບຣນ (Brand Color) ຂອງທຸລະກິດທ່ານເອງເດີ້.

ສະຫຼຸບ

ແນ່ນອນວ່າການຂຽນໂຄ້ດເອງທຸກສ່ວນອາດຈະໃຊ້ເວລາຫຼາຍ ໂດຍສະເພາະສຳລັບເຈົ້າຂອງທຸລະກິດທີ່ຕ້ອງການຄວາມໄວ. ຖ້າທ່ານກຳລັງຊອກຫາທາງລັດໃນການສ້າງເວັບໄຊທີ່ງາມ, ມີອົງປະກອບຕ່າງໆຄົບຖ້ວນ (ລວມເຖິງປຸ່ມ CTA ທີ່ອອກແບບມາຢ່າງສົມບູນແບບແລ້ວ), Lao.Template ມີ Template ເວັບໄຊສຳເລັດຮູບຫຼາກຫຼາຍແບບໃຫ້ທ່ານເລືອກໃຊ້. ທຸກ Template ຂອງພວກເຮົາຖືກອອກແບບມາຢ່າງໃສ່ໃຈໃນທຸກລາຍລະອຽດ ໃຫ້ທ່ານພ້ອມນຳໄປໃຊ້ສ້າງຍອດຂາຍໄດ້ທັນທີ!