Search Btn

 

Search-Button

HTML

<form>

<img src="https://html.sammy-codes.com/images/background.jpg" style="width: 100%; height: 650px;">

<input type="text" name="search" placeholder="🔎">

</form>

CSS

<style>

input[type=text]{

width: 100px;

box-sizing: border-box;

border: 2px solid #ccc;

border-radius: 150px;

background-color: white;

background-position: 10px 10px;

background-repeat: no-repeat;

padding: 12px 20px 12px 40px;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

font-size:16px;

transition: width 0.30s ease-in-out;

position: absolute;

}

input[type=text]:focus{

width: 80%;

border-radius: 0;

}

</style>