Apply CSS transform scale without move other elements - html

Question

I want to grow the element background and font on hover. However it does impact all other elements position like the border of the form, elements side.
I tried to do it with the box-shadow but only the shadow is enlarged and not the text.
please Help
LINk: Code for HTML and CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
.contenedor {
display: inline-block;
width: 400px;
height: 400px;
}
form {
padding: 30px;
border: 1px solid #ccc;
}
input[type="submit"] {
width: 80px;
background: #24b080;
padding: 10px;
border: 1px solid #24b080;
cursor: pointer;
color: white;
margin-top: 10px;
margin-bottom: 10px;
transition: all 0.3s ease-out;
}
input[type="submit"]:hover {
background-color: #24b080;
border: 2px solid #24b080;
color: #fff;
transform: scale(1.2, 1.2);
}
<form name="formulario" action="">
<input type="submit" value="Send">
<input type="submit" value="OK">
<input type="submit" value="Cancel">
</form>

Answer 1

You can change this
form {
padding: 30px;
border: 1px solid #ccc;
}
to this:
form {
padding: 30px;
border: 1px solid #ccc;
height: 120px;
}
If you give the Form a fixed height then it cannot move when the buttons get bigger.

Answer 2

You can apply vertical-align: top; to input[type="submit"] to avoid the slight vertical movement on hover (I guess that's what you meant?):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
.contenedor {
display: inline-block;
width: 400px;
height: 400px;
}
form {
padding: 30px;
border: 1px solid #ccc;
}
input[type="submit"] {
width: 80px;
background: #24b080;
padding: 10px;
border: 1px solid #24b080;
cursor: pointer;
color: white;
margin-top: 10px;
margin-bottom: 10px;
transition: all 0.3s ease-out;
vertical-align: top;
}
input[type="submit"]:hover {
background-color: #24b080;
border: 2px solid #24b080;
color: #fff;
transform: scale(1.2, 1.2);
}
<form name="formulario" action="">
<input type="submit" value="Send">
<input type="submit" value="OK">
<input type="submit" value="Cancel">
</form>