Description:-

Hello everyone! In this video, you are going to learn " How to create Hover Search Button - Using HTML & CSS ".

Let's see!

Result -

Hover Search Button - Codexbaba

You Might Also Like ➝

• Authentic Weather Loader - Using HTML & CSS

• DROPMORPHISM UI DESIGN - Using HTML & CSS

• Profile card hover effect - Using HTML & CSS

• About us page with pop effect - Using HTML & CSS

• Social Media Button Hover Effect - Using Html & CSS 

• Login in Page - Using HTML & CSS

• CardHover -Using HTML & CSS

All the source codes and source files and available to download from here. Copy and paste the code from the text editors. First, try it by following the video tutorial. It will help you to understand all of it. After that, if you have got something wrong with your code use the given source codes to compare with yours. It will help you to understand all of it and your mistakes.

Source code:-

Hover Search Button - Using HTML & CSS

HTML 

<div class="searchBox"> <input class="searchInput"type="text" name="" placeholder="Search"> <button class="searchButton" href="https://www.codexbaba.tech/"> <i class="material-icons"> search </i> </button> </div> <div class="searchBox"> <input class="searchInput"type="text" name="" placeholder="Search"> <button class="searchButton" href="https://www.codexbaba.tech/"> <i class="material-icons"> search </i> </button> </div>

CSS

body { background-image: linear-gradient(to right , #cb2d3e , #ef473a); } .searchBox { position: absolute; top: 50%; left: 50%; transform: translate(-50%,50%); background: #2f3640; height: 40px; border-radius: 40px; padding: 10px; } .searchBox:hover > .searchInput { width: 240px; padding: 0 6px; } .searchBox:hover > .searchButton { background: white; color : #2f3640; } .searchButton { color: white; float: right; width: 40px; height: 40px; border-radius: 50%; background: #2f3640; display: flex; justify-content: center; align-items: center; transition: 0.4s; } .searchInput { border:none; background: none; outline:none; float:left; padding: 0; color: white; font-size: 16px; transition: 0.4s; line-height: 40px; width: 0px; } @media screen and (max-width: 620px) { .searchBox:hover > .searchInput { width: 150px; padding: 0 6px; } }

× NOTE: Make sure that you follow us on Telegram ( our recommendation ). Some drives will be telegram exclusive.

Follow us

Telegram

Join Our Telegram Group of your batch and get Off-campus and Job updates.

Instagram

Join Our Instagaram channel of your batch and get Off-campus and Job updates.

full-width

You Might Also Like ➝

• Authentic Weather Loader - Using HTML & CSS

• DROPMORPHISM UI DESIGN - Using HTML & CSS

• Profile card hover effect - Using HTML & CSS

• About us page with pop effect - Using HTML & CSS

• Social Media Button Hover Effect - Using Html & CSS 

• Login in Page - Using HTML & CSS

Thanks for reading our article.