Implement button functionality using <button> tag

[mre1ght]

Current Situation

The button functionality is implemented using input andlabeltags.

<input class="close-btn" id="close-btn" type="checkbox">
<label for="close-btn" class="menu-btn">
  <i class="fas fa-bars burger-icon"></i>
</label>

Ideal Situation

The button functionality should be implemented using the button tag.

Sample

<button>
  <i class="fas fa-bars burger-icon"></i>
</button>

Reason

The code should be easily understandable at first glance by Adaniya-san and Falcon-san. Typically, the labelandinputtags have specific roles, and using them outside of these roles can cause confusion.

Reference

The buttontag has default CSS styles. Please refer to the following site to reset the CSS for thebutton (Need translation from Japanese to English) https://usefulweb.net/button-reset/

[rhmtrz]

@mre1ght

according to the current building structure of navbar menu icon, can not use <button> tag instead of ` tag.

Please read the input tag and label tag specifications. Also, try understand the HTML global attribute

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes