title: HTML input button appears different in iPad
body: <p>I've created HTML input.</p>
  
  <pre><code>&lt;input type="submit" id="Submitbtn" onclick="javascript:function()" value="Login" name="Submitbtn"&gt;
  </code></pre>
  
  <p>CSS is:</p>
  
  <pre><code>input:hover, input{
       background: none repeat scroll 0 0 #1356B4;
       border: medium none;
       margin-right: 0;
       padding: 3px 10px 5px 0;
       vertical-align: middle;
       border-radius: 5px 5px 5px 5px;
       color: #FFFFFF;
       cursor: pointer;
       display: inline-block;
       font: 14px/26px Arial,Helvetica,sans-serif;
       height: 26px;
       -webkit-transition: all 0.3s ease-in-out 0s;
  }
  </code></pre>
  
  <p>The output in web browsers:</p>
  
  <p><img src="https://i.stack.imgur.com/AeMZz.png" alt="enter image description here"></p>
  
  <p>And in iPad:</p>
  
  <p><img src="https://i.stack.imgur.com/CKq2f.png" alt="enter image description here"></p>
  
  <p>How to resolve this?</p>