Make button h1/h2 etc

these are custom classes to set by yourself: is-h1; is-h2 etc. because you can remember that better than other classnames.
so that snippet:

function replace_tags_with_tags(){
?>
<script>
  (function($) {       
      function replaceElementTag(targetSelector, newTagString) {
        $(targetSelector).each(function(){
          var newElem = $(newTagString, {html: $(this).html()});
          $.each(this.attributes, function() {
            newElem.attr(this.name, this.value);
          });
          $(this).replaceWith(newElem);
        });
      }
      // f.e.: custom-class expresses the h-tag you like to get
      replaceElementTag('.avia-button-wrap.is-h1 .avia-button .avia_iconbox_title', '<h1></h1>');  
      replaceElementTag('.avia-button-wrap.is-h2 .avia-button .avia_iconbox_title', '<h2></h2>');  
      replaceElementTag('.avia-button-wrap.is-h3 .avia-button .avia_iconbox_title', '<h3></h3>');  
      replaceElementTag('.avia-button-wrap.is-h4 .avia-button .avia_iconbox_title', '<h4></h4>');  
  }(jQuery)); 
</script>
<?php
}
add_action('wp_footer', 'replace_tags_with_tags');

will only work if you think of to set that custom class to that button

________
the script for the button-row to have unique ids on the buttons inside a button row is just to select easily those buttons.
Otherwise you had to work with something like this: .avia-button:nth-of-type(2) etc.

so if you got an ID on a button-row abc – the first button of that row will have the ID: abc-button1 etc.
then you can add a new line to the script above:

replaceElementTag('#abc-button1 .avia_iconbox_title', '<h1></h1>');
replaceElementTag('#abc-button2 .avia_iconbox_title', '<h2></h2>');
replaceElementTag('#abc-button3 .avia_iconbox_title', '<h3></h3>');

I don’t think it makes sense for buttons and certainly not for a button row; but if you want it, I’ll show you how to force it ;)

see again a button row with all the codes here: https://webers-testseite.de/buttonrow/

So – if you follow my instructions – also at the example page – you can see that it works. Even though I do not think this is recommendable.

First of all, you don’t seem to have grasped the difference between classes and ids.
So if you follow the description you will see that I have assigned an ID to the button row and not a class.

There is no option on the button-row element to give different classes or id’s to the single button in a row.
You are only able to do that for the wrapping container. That is the reason for the first snippet:
It passes this assigned ID to the child elements ( avia-button) in combination with an index, so that each avia-button now has a unique ID.

( click to enlarge the image:)

on that screenshot you see that the ID of the button row will be found on each button ( part of that row ) as a unique ID for each Button with a littel addendum ( – button1; -butten2 etc. )

As already mentioned above, you could of course select the individual buttons in the row by count them.
an expression like this will do the selection too: #abc .avia-button:nth-of-type(1) .avia_iconbox_title

__________________________________

Here now my closing comment:

It is generally not recommended to include an H1 tag within an anchor tag. The H1 tag is typically used to indicate the main heading of a webpage, and it is best to reserve it for that purpose. Using an H1 tag within an anchor tag could be seen as a misuse of the tag, and could potentially harm your SEO efforts. Additionally, search engines may not be able to understand the context of the H1 tag if it is used in this way.
It is best to stick to using anchor tags for linking purposes, and using H1 tags for headings.

If you only like to have bigger font-sizes inside a “button” – there are other better and easier ways to obtain it.