resizing box when zooming in or out
<p>I have problem with resizing of &quot;button&quot; when i scroll the page out, it reizes on it's own, and I'm wondering if there is any way to prevent it from happening, to stay the same when it is when I resize it :</p>
<p><a href="https://i.stack.imgur.com/9ONQK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9ONQK.jpg" alt="enter image description here" /></a></p>
<p><a href="https://i.stack.imgur.com/DEx3y.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DEx3y.jpg" alt="enter image description here" /></a></p>
<h3>My CSS :</h3>
<pre><code>#regsubmit {
    src: url('../fonts/Arial.otf');
    border: none;
    background-color:#7C8E46;
    font-weight: normal;
    padding: 0.5% 11px;
    margin-left: 10px;
    line-height: 1;
    color: #FFF;
    float: left;
    position: relative;
    margin: 12px 5px 10px;
    font-size: 12px;
    -webkit-appearance: initial;
}
</code></pre>