CSS animation not working as i want

HTML-CSS
1

https://codepen.io/CodeKing210/pen/NWrmXyN
Why the submit button reduce its size only from right side when hiver over it.
kindly help me with this.
thanks you
@ilenia @codely

2

Hey @mudassirikram21
It is because in the line 52 in CSS section there is a code like width: 400px; now it will not going into the right

3

so, what should i do to reduce its size form both sides left and right when a person hovers over it.

4

I think you have some options:

use the scale() css function to scale your element like:

@keyframes sub {
  100% {
   transform: scaleX(0.8);
  }
}

Or you should change the display property of your input, since as it is the browser has no real way to tell that “input” should stay centered even at a different size.
This is easily achievable by leveraging the flex display with justify-content and align-items combined.

I made a quick demo for you here
Hope it helps :sparkles:

1 Like