Strange Grey Button Background on Mobile Only with Bootstrap

Question

I have a nav that looks like this:

    <nav class="text-center">
      <button class="btn nav-button color-house" type="button"><%= link_to "House", home_house_path, class: "color-house" %></button>
      <button class="btn nav-button color-spouse" type="button"><%= link_to "Spouse", home_spouse_path, class: "color-spouse" %></button>
      <button class="btn nav-button color-kids" type="button"><%= link_to "Kids", home_kids_path, class: "color-kids" %></button>
      <button class="btn nav-button color-neutral" type="button"><%= link_to "Blog", blogs_path %></button>
    </nav>

Which works out fine on a computer:

But for some strange reason has a strange grey background on a mobile device:

The weird part is if I try the chrome inspector's mobile simulator, it looks totally fine...the image only appears with the unwanted grey on an actual phone.

The link to the heroku site is here in case you want to see the actual thing.

I feel like this has to be some kind of Bootstrap 4 thing, as I've never experienced this behavior on a site without it.

I've tried background-color: white !important on btn and nav-button, but to no avail. The only custom CSS I currently have is this:

$color-house: #84C99A;
$color-spouse: #313E50;
$color-kids: #EFB0A1;
$color-neutral: #B7AD99;
$color-black: #26010C;

.color-house { color: $color-house; }
.color-spouse { color: $color-spouse; }
.color-kids { color: $color-kids; }
.color-neutral { color: $color-neutral; }
.color-neutral-hover:hover { color: $color-black; }

.nav-button a {
  font-family: $font-script;
  display: inline-block;
  font-size: 30px;
  padding-top: 10px;
  margin: 10px 10px 20px 10px;
  border-top: solid thin white;
  border-top: solid thin white;
}

@media screen and (max-width: 800px) {
  .nav-button a {
    margin: 10px 5px 30px 5px;
    font-size: 25px;
  }
}

Answer 1

Add background transparent property to .btn class

.btn {background: transparent;}