I have no idea what would fix this.
https://jsfiddle.net/eL5gn73s/
That big one is a div, the small ones are the buttons that have shrunk.
The button should be the same size as the div, not the other way around.
After changing from a div to a button, the button shrunk smaller than the size of the div that was 47px.
.box {
position: relative;
background: red;
width: 47px;
height: 47px;
border-radius: 4px;
border-width: 4px;
border-style: solid;
border-top-color: rgba(255, 255, 255, 0.5);
border-left-color: rgba(0, 0, 0, 0.3);
border-right-color: rgba(0, 0, 0, 0.3);
border-bottom-color: rgba(0, 0, 0, 0.8);
}
.box.box2 {
background: red;
}<button class="box box2" type="button"></button>
<button class="box " type="button"></button>
<div class="box"></div>>Solution :
Give them both a display:block (or inline-block) and add box-sizing:content-box to both, then add box-sizing to both (border-box)
div.exit,
button.exit {
display: block;
box-sizing: content-box;
}
/*add element just for specificity here */
button.exit,
div.exit {
box-sizing: border-box;
margin: 0;
background: red;
width: 47px;
height: 47px;
border-radius: 4px;
border-width: 4px;
border-style: solid;
border-top-color: rgba(255, 255, 255, 0.5);
border-left-color: rgba(0, 0, 0, 0.3);
border-right-color: rgba(0, 0, 0, 0.3);
border-bottom-color: rgba(0, 0, 0, 0.8);
}
.exit.exitPage2 {
background: red;
}<button class="exit exitPage2" type="button"></button>
<button class="exit " type="button"></button>
<div class="exit"></div>