Angular Material FAB button will not resize

I am building a simple webapp, I am using angularjs and angular material. I am using a cpuple <md-button class="md-fab">Hi</md-button> and I would like them to be quite large. I had made its width, height equal to 400px. But as the screen gets smaller I would like it to shrink down to a size of 115px on the smallest screen. I have tried a bunch of things but my current solution is just making a bunch of different buttons and applying ng-show to them when the screen get to a certain size.

This solution works but it is repetitive and when I change one thing about the button I now need to do it 5 times. Is there a better solution to this issue?

my html code is below:

html

<!--width >= 1280px-->
<div hide show-gt-md flex="100"  class="md-padding" layout="row" layout-align="space-between">

  <div flex="33">
    <md-button flex style="height: 400px; width: 400px; background-color: #0b97c4; " class="answerButtons md-fab" aria-label="Eat cake"><h1 class="headerText">Pepsi</h1></md-button>
  </div>

  <div flex="33" style="margin: auto">
    <div style=" height: 250px; width: 250px;  border-radius: 150px; margin: auto; text-align: center" md-whiteframe="3">
      <h1 class="headerText" style="margin: auto; vertical-align: middle; line-height: 250px">VS.</h1>
    </div>
  </div>
  <div flex="33">
    <div>
      <md-button style="height: 400px; width: 400px;" class="md-fab" aria-label="Eat cake"><h1 class="headerText">Coke</h1></md-button>
    </div>
  </div>

</div>

<!--960px <= width < 1280px-->
<div hide show-md flex="100"  class="md-padding" layout="row" layout-align="space-between">

  <div flex="33">
    <md-button flex style="height: 300px; width: 300px; background-color: #0b97c4; " class="answerButtons md-fab" aria-label="Eat cake"><h1>Pepsi</h1></md-button>
  </div>

  <div flex="33" style="margin: auto">
    <div style=" height: 200px; width: 200px;  border-radius: 150px; margin: auto; text-align: center" md-whiteframe="3">
      <h1 style="margin: auto; vertical-align: middle; line-height: 150px">VS.</h1>
    </div>
  </div>
  <div flex="33">
    <div>
      <md-button style="height: 300px; width: 300px;" class="md-fab" aria-label="Eat cake"><h1>Coke</h1></md-button>
    </div>

  </div>

</div>

<!--600px <= width < 960px-->
<div hide show-sm flex="100"  class="md-padding" layout="row" style="overflow: visible;">

  <div flex="40">
    <md-button flex style="height: 215px; width: 215px; background-color: #0b97c4; " class="answerButtons md-fab" aria-label="Eat cake"><h1>Pepsi</h1></md-button>
  </div>

  <div flex="20" style="margin: auto">
    <div style=" height: 115px; width: 115px;  border-radius: 150px;  bottom: 0; margin:auto; text-align: center" md-whiteframe="3">
      <h1 style="margin: auto; vertical-align: baseline; line-height: 125px">VS.</h1>
    </div>
  </div>
  <div flex="40">
    <div>
      <md-button style="height: 215px; width: 215px;" class="md-fab" aria-label="Eat cake"><h1>Coke</h1></md-button>
    </div>

  </div>

</div>

<!--width <= 600px-->
<div hide-gt-xs flex="100" layout="row" style="overflow: visible;">

  <div flex="40">
    <md-button flex style="height: 115px; width: 115px; background-color: #0b97c4; " class="answerButtons md-fab" aria-label="Eat cake"><h1>Pepsi</h1></md-button>
  </div>

  <div flex="20" style="margin: auto">
    <div style=" height: 65px; width: 65px;  border-radius: 150px;  bottom: 0; margin:auto; text-align: center" md-whiteframe="3">
      <h1 style="margin: auto; vertical-align: baseline; line-height: 65px">VS.</h1>
    </div>
  </div>
  <div flex="40">
    <div>
      <md-button style="height: 115px; width: 115px;" class="md-fab" aria-label="Eat cake"><h1>Coke</h1></md-button>
    </div>

  </div>

</div>

As you see the code is quite messy and is a real pain to change anything. Please help if you can!