Button CSS on tablet does not look like shown on PC and Responsive Design Mode

Question

I did everything right but is not as expected when access the site by tablet, click run to see better what I say

function mudarNome2()
{
 if(document.getElementById("buttonhide2").value == "Ocultar Menu")
 {
  document.getElementById("buttonhide2").value = "Mostrar Menu";
 } 
 else
 {
  document.getElementById("buttonhide2").value = "Ocultar Menu";
 }
}


$(document).ready(function(){

$("#buttonhide2").click(function() {

if($("header").css("display")=="none") {
$("header").show();
} else {
$("header").hide();
}

});
});

#buttonhide2 {
  display: block;
  position: absolute;
  width: 115px;
  height: 30px;
  top: 194px;
  right: 0px;
  background: #ba1e1e;
  color:white;
  border:0;
  border-radius: 40px 0 0 40px;
  box-shadow: 0 0 6px 1px black;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' id='buttonhide2' onclick='mudarNome2();' value='Ocultar Menu'>

<header>

Aqui some ao clicar no botão<br><br>

NO PC<br>
<img src="https://i.imgur.com/WWsdDp7.png" width="150"/>
<br><br>
NO MODO EMULADOR DE TABLET<br>
<img src="https://i.imgur.com/80SE03B.png" width="150"/>
<br><br>
NO TABLET<br>
<img src="https://i.imgur.com/OFSY5B6.png" width="150"/>

</header>

Answer 1

It’s probably Webkit (Safari or native to Android), just use the property:

#buttonhide2 {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}