Html – Beginner Question : how to make the Check button clickable?

The problem comes from the :focus style block being cancelled (near) instantaneously when the search field loses focus. As the button can’t be clicked while the search field has focus, and is unexposed unless the search field has focus, the button is never available to receive a click event.

As far as I know, there is no way for the transformation to persist after the focus is lost using your css approach.

A work-around would be to remove the :focus css block and instead perform the translation by amending the style through javascript. When javascript sets a style rule, it persists until another command changes it, allowing the button to remain exposed after the search field has lost focus.

This is done by first creating a reference to the search box in javascript:

const textInputElement = document.querySelector("input.search-input");

and then setting an event listener to add the translation style in response to the search field gaining focus:

textInputElement.addEventListener("focus", function () {
textInputElement.style = "transform: translateX(-70px)";
});

The translated position persists after the search field loses focus making the button available to click.

Working snippet:

const textInputElement = document.querySelector("input.search-input");

textInputElement.addEventListener("focus", function () {
textInputElement.style = "transform: translateX(-70px)";
});

function fetch(){
    alert('Clicked');
  
}

.fetch-container{
    margin: 20px;
    position: fixed;
    top : 50vh;
    left: 45vw;
}

body{
    background-color: rgb(223, 222, 222);
}

.search-input{
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 10px;
    border-radius: 25px;
    border-style: none;
    z-index: 2;

}
/*
.search-input:focus{
   
    outline: none;
    transform: translateX(-70px);

}
*/
.search-button{
    position: absolute;
    top: 0px;
    left: 70px;
    padding: 10px 5px 10px 50px;
    border-radius: 25px;
    border-style: none;
    width: 120px;
    z-index: 1;
    cursor: pointer;
}

.search-button:hover{
    background-color: #FFC26F;
}

<div class='fetch-container'>
<div> 
 <input class='search-input' type='text'  placeholder='Please Enter your City'/>
 <button type='submit' class='search-button'              onClick="fetch()">Check</button>
 </div>
 </div>

Don’t forget to remove, or comment out, the :focus css block:

/*
.search-input:focus{   
    outline: none;
    transform: translateX(-70px);
}
*/