how to put two buttons together in the footer

To be responsive, the width should be in% and not fixed in px. It would be good practice to use classes to define the common format of both, as well as for the particular.

<style>
.my-btn{
  position: absolute; bottom:0; padding: 10px; width: 40%; text-align: center; border: solid 1px #000;  border-radius: 5px;
}

.btn-llamar {
  color: #000; background: #fff;  margin-left: -195px;
}

btn-chat { 
  color: #fff; background: #000; margin-left: -15px;
}
</style>

<center>
<a class="my-btn btn-llamar">LLAMAR</a><a class="my-btn btn-chat" >CHAT</a></center>

I made a small code to guide you; first create a layer with the class container with a height of 300px to emulate your body and position the footer in the bottom of the page or in this case in the layer with the class container . Then create a footer to emulate your example where you say that what you try to do is at the bottom of your page; and finally create the two buttons which I made some small changes to css to be responsive :

1) I removed the position: absolute attribute.

2) To the two buttons the width attribute of the percentage places to better suit any resolution, for px they are static.

3) To the two buttons I put the property display: inline-block; to be treated as text and the footer you can center without using the margin-left and the margin-right that you had; To the footer, add the text-alig: center property so that you always center the two buttons automatically regardless of the resolution of the screen. With this you remove the center tag which is already deprecated or deprecated for html5.

4) Let the buttons place a property font-size: 3vw , where placing vw as the unit of measure is indicating that suits according to the resolution of the screen.

You can run the code and to see it work by giving run there is an option that is displayed later in the lower right called Full page , you give it there and there you can Try minimizing the browser so you can see how it is adapting. I hope you know what you're looking for.

.container{
  border:1px solid blue;
  height:300px;
  position:relative;
}

footer{
 border: 1px solid red;
 bottom:0px;
 position:absolute;
 text-align:center;
 width:100%;
}

.llamar,
.chat{
  border: solid 1px #000;
  border-radius: 5px;
  display:inline-block;
  font-size:3vw;
  padding:10px;
  text-align: center;
  width:20%;
}

.llamar{
  background-color:#fff;
  color:#000;
}

.chat{
  background-color:#000;
  color:#fff;
}

<div class="container">
  <footer>
    <a class="llamar">LLAMAR</a>
    <a class="chat">CHAT</a>
  </footer>
</div>