Why to use [attributes] when adding class to a button inside my hook function
This more a theoretical question. You can see in the documentation or example code how to use the render element.

The technical background is, that each render element defines variables which you can use when building the render array. The variables of a render element are placed on the top level of the render array and prefixed with '#'.

This is an excerpt of the code which prepares the render element for rendering:

  public static function preRenderButton($element) {
    $element['#attributes']['type'] = 'submit';
    Element::setAttributes($element, array('id', 'name', 'value'));


Here you can see that #id, #name and #value are placed in the attributes by the element itself.

If you want to set other attributes, you have to place them yourself in #attibutes.