CSS Reverse Transition Effect

Question

How do I make this search bar instead of being opened right be opened left?

<style>

input.input_home {
  height: 50px;
  border: none;
  outline: none;
  padding-left: 50px;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  z-index: 3;
  transition: width 1s ease-out;
  cursor: pointer;
}
input:focus { 
  border: 1px solid #ccc;
  border-radius: 25px;
  width: 50%;
  z-index: -1;
  transition: width 1s ease-in;
}
button { 
  height: 50px;
  width: 50px;
  background:  url('lupa.png')  center no-repeat;
  border: none;
  position: absolute;
  top: 0;
  z-index: 2;
  cursor: pointer;
}
button:focus {
  outline: none;
}
/* esconde o LABEL "Buscar" */
label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;	
}
</style>
<form action=" " method="post">
  <label for="busca">Buscar</label>
  <input class="input_home" type="search" id="busca" name="q">
  <button type="submit">OK</button>
</form>

Answer 1

From what I understand you want the bar to grow, but btn OK to stay right.

The way you built the Form the way I found it was by putting a margin-left in the button with a transition when you do Focus on input. So at the same time that you do Focus on input and does the transition in it I also make a transition in the button that comes next with

You’ll notice I used two transition in the button, or before and after :focus, this was necessary to make the "fine tuning" while the element opens and closes so that it is more synchronized, but you can play with these values to see what pleases you most.

Follow the image code above

input.input_home {
	height: 50px;
	border: none;
	outline: none;
	padding-left: 50px;
	width: 0;
	position: absolute;
	top: 0;
	left: 0;
	background: none;
	z-index: 3;
	transition: width 1s ease-out;
	cursor: pointer;
}

input:focus {
	border: 1px solid #ccc;
	border-radius: 25px;
	width: 50%;
	z-index: -1;
	padding-right: 50px;

	transition: width 1s linear;
}

button {
	transition: margin-left 0s linear;
}

input:focus+button {
	margin-left: calc(50% - 65px);
	transition: margin-left 900ms linear;
	transition-delay: 100ms;
}

form {
	width: 50%;
}

button {
	height: 50px;
	width: 50px;
	background: url('lupa.png') center no-repeat;
	/* background:  url('https://placecage.com/50/50')  center no-repeat; */
	border: none;
	position: absolute;
	top: 0;
	z-index: 2;
	cursor: pointer;
}

button:focus {
	outline: none;
}

/* esconde o LABEL "Buscar" */
label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

<form action=" " method="post">
	<label for="busca">Buscar</label>
	<input class="input_home" type="search" id="busca" name="q">
	<button type="submit">OK</button>
</form>