Box-Sizing on input button does not work

Question

Guys, I have a form where when I apply a border-bottom to the input button it jumps because the box-Sizing is not working (I believe that’s it). In other input is working properly. Can anyone help me?

Answer 1

A hint, use box-shadow in place of border. First time the box-shadow does not occupy moonlight in the box-model and will not shift or move its element, after the transition of the box-shadow is usually better rendered and is smoother than the border transition. So making a box-shadow: inset you place the shadow inside the button, giving the impression that it is a border.

[type="button"] {
	all:unset;
	background-image: linear-gradient(to bottom, blue 0%, royalblue 100%);
	color: #fff;
	width: 100px;
	height: 50px;
	border-radius: 4px;
	text-align: center;
  cursor:pointer;
	transition: box-shadow 250ms;
}
[type="button"]:hover {
	box-shadow: inset 0 -4px 0 red;
}

<input type="button" value="login">