JSFiddle - React, Tailwind, and code Playground

HTML

<button class="button animated array grey unsubscribe icon evensmaller"><span>how do I look in firefox?</span></button>
<hr>
<p><strong>Problem:</strong>In Firefox, the inner-most dimensions (look at the layout tab in firebug) is "6 x 15"</p>
<br />
<p>Yet in chrome and safari (scroll down to "metrics" in the element inspector) the dimensions are 4 x 15, which is what I'd like (or 0 x 15 really).</p>
<br />
<p>The result of this is that the button looks more like an oval than a circle in FF, and it causes overlapping issues in the website itself.</p>

CSS

.button {
  -webkit-transition: all 0.2s ease;
  -moz-transition:    all 0.2s ease;
  -ms-transition:     all 0.2s ease;
  -o-transition:      all 0.2s ease;
}
.button, input[type=submit] {
    border: 3px solid;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: white;
    padding: 9px 18px 7px 18px;
    font-family: Museo-500, Helvetica, sans-serif;
    font-size: 16px;
    cursor: pointer;
    margin:0 10px 10px 0px;
    text-align:center;
-moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.button.green.secondary, .button.green.primary:hover {
    border-color:rgb(22, 162, 84);
    color: rgb(22, 162, 84);
}
.button.grey.secondary, .button.grey.primary:hover {
    border-color: #777;
    color: #777;
}
.button.blue.secondary, .button.blue.primary:hover {
    border-color: #088AB5);
    color: #1DA4ED;
}

.button.secondary:active, .button.primary:active, .button.primary {
    color:white;
}
.button.green.secondary:active, .button.green.primary:active {
    border:3px solid #107039;
    background-color:#107039;
}
.button.grey.secondary:active, .button.grey.primary:active {
    border:3px solid #222;
    background-color:#222;
}
.button.blue.secondary:active, .button.blue.primary:active {
    border:3px solid #088AB5;
    background:rgb(19,87,143);
}

.button.green.primary, .button.secondary.green.on {
    border-color: rgb(17,150,24) rgb(22, 122, 84) rgb(22, 122, 84) rgb(17,150,24);
    background-color: rgb(22, 162, 84);
    color: white;
    text-shadow:0px 0px 4px rgb(11,81,43);
    background: rgb(18,122,61); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background:...