Button effect macam <kbd>

1st time tengok effect ni kat blog onexoxplan.com by khairul anarm. Dalam tu ada text effect yang guna <kbd></kbd>. Dalam template2 blogger yang dibuat oleh Indonesian, kebanyakan memang akan guna fungsi kbd ni.

Cumanya sekarang, kalau nak buat sendiri effect tu aku tak pandai, rasanya guna CSS. Tapi tak pasti camna boleh simply guna <kbd>text</kbd> untuk dapat effect tu.

Ketepikan dulu kerumitan tu. Aku cuba buat sendiri guna CSS, tapi nak apply dia agak panjang.

Langkah 1, kena buat CSS dulu.

.butang-effect {
  display: inline;
  padding: 0.1em 0.2em; /* Adjusted padding */
  background-color: #dddddd; /* Grey color for the button */
  color: #666666; /* Text color */
  border: 1px solid #bbbbbb; /* Button border */
  border-radius: 4px; /* Rounded corners */
  box-shadow: 0 1px 0 #999999; /* 3D effect */
  text-shadow: 0 0 2px #ffffff; /* Text shadow for 3D effect */
}

Letak css baru tu dalam template, atau dalam post pun boleh. Kalau dalam post kena letak dalam <style></style>.

Then buat apply effect tu kat text dengan cara;

<span class="butang-effect">text</span>

Contoh;

This is a <span class="butang-effect">button-like</span> effect for specific words within a paragraph.

Hasilnya jadi seperti ini;

Effect tu digunakan ke atas perkataan Butang sahaja.