title: Can't make my button look the same in different browsers
body: <p>I am not very good at web design, I created a button using CSS but I don't know how to make it look the same in different browsers.</p>
  
  <p>This is the button I use:</p>
  
  <pre><code>&lt;input type="submit" class="randombutton" value="click here!"/&gt;
  </code></pre>
  
  <p>This is the css I created:</p>
  
  <pre><code>.randombutton {
     border-top: 1px solid #d1d425;
     background: #e6eb4c;
     background: -webkit-gradient(linear, left top, left bottom, from(#92b019), to(#e6eb4c));
     background: -webkit-linear-gradient(top, #92b019, #e6eb4c);
     background: -moz-linear-gradient(top, #92b019, #e6eb4c);
     background: -ms-linear-gradient(top, #92b019, #e6eb4c);
     background: -o-linear-gradient(top, #92b019, #e6eb4c);
     padding: 19px 38px;   
     border-radius: 40px;  
     color: white;
     font-size: 23px;
     font-family: Georgia, Serif;
     text-decoration: none;
     vertical-align: middle;
     display: block;
      margin-left: auto;
      margin-right: auto;
     }
  .randombutton:hover {
      border-top-color: #c0df36;
     background: #c0df36;
     color: white;
     }
  .randombutton:active {
     border-top-color: #9eb829;
     background: #9eb829;
     }
  </code></pre>
  
  <p>This is the result I get in 3 different browsers:</p>
  
  <p><img src="https://i.stack.imgur.com/B8zfK.jpg" alt="enter image description here"></p>
  
  <p>Also I would like to mention that I can't center the button in the middle of the screen.</p>
  
  <p>The button should look like the image for pasted for the Chrome browser. I'll appreciate some help. </p>