How do you prevent a button from getting smaller, when changing from a div to a button?-CodePudding

I have no idea what would fix this.

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  type="button"></button>
<button  type="button"></button>

<div ></div>

CodePudding user response：

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)

As for a FULL answer: this has to do with the border-box and content box which differs from div to button

Button uses the smaller and div the larger.

content-box uses the size   padding   borders
border-box uses size   padding - borders

SO your 4px X 2 border-radius has to be added TO the button to make it the same size as the div.

Here I show both the fixed and then the original for comparison (all as inline-block just for visual) Notice the first group is the same size as the second groups DIV.

Hopefully this gives a better explanation and how to "fix" it.

body {
  font-size: 16px;
  background-color: #ddffdd;
  margin: 0;
  padding: 0;
}

button.exit,
div.exit,
div.exit-new,
button.exit-new {
  display: inline-block;
  position:relative;
}

div.exit-new,
button.exit-new {
  width: 47px;
  height: 47px;
}

div.exit {
  box-sizing: content-box;
  width: 47px;
  height: 47px;
  top: 4px;
}

button.exit {
  box-sizing: border-box;
  width: 55px;
  height: 55px;
}

/*add element just for specificity here */
button.exit,
div.exit,
div.exit-new,
button.exit-new {
  background: red;
  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;
}

<div >
  <button  type="button"></button>
  <button  type="button"></button>
  <div ></div>
</div>
<div >
<div>originals</div>
  <button  type="button"></button>
  <button  type="button"></button>
  <div ></div>
</div>

CodePudding user response：

try editing the buttons in the .exitpage2 css like this

.exit.exitPage2 {
  background: red;
   width: 50px;
  height: 50px;
}

it should do what you need it to if you set the height and width to the desired amounts