Awesome CSS Search Box Using Only HTML & CSS

Coding BD given here Awesome CSS Search Box Using Only HTML & CSS. We create animated search box. It is the most important part Of Pure css animation tutorial. We have given more importance to css search bar design. We have used a css glowing effects animation because they need high effects. Thank you so much.

Create a Payoneer Account & Earn 25$:→ 

Create a Fiverr Account & Earn 100$:→ 

?? If You like this video Please like, share and subscribe This video.?? 

?? Check Others Programming Video?

➡️How To Create Login Form In HTML and CSS: 

➡️ contact page design with map using html css: 

➡️  Pure sliding tabs using html and css:

➡️ Animated Background Image Loop Animation: 

➡️  water wave background animation effects: 

➡️ How to Download Source code in Coding BD:  

➡️ Responsive website html css javascript | part( 1 ): 

➡️ Responsive Services Section: 

➡️ Plane animation only html css: 

➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021: 

➡️  Neon Light Button Animation Effects on Hover | CSS Snake Border: 

➡️ Responsive Box Model Web Design Using CSS Flexbox: 

➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript: 

➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021:   

➡️Scroll top button : 

Source code here: ( Awesome CSS Search Box Using Only HTML & CSS )

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome CSS Search Box Using Only HTML & CSS</title>
    <link href="" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <div class="search-box">
        <input class="search-text" type="text" placeholder="Type to search">
        <a class="search-btn" href="#">
            <i class="fa fa-search"></i>
    margin: 0;
    background-color: #e84118;
    text-decoration: none;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #2f3640;
    height: 40px;
    border-radius: 40px;
    padding: 10px;
.search-box:hover > .search-text{
    width: 240px;
    padding: 0 6px;
.search-box:hover > .search-btn{
    background-color: #fff;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #2f3640;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;

    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    color: #fff;
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;

Don’t Forget to Follow me on all Social Network,

Facebook Page: 



You can see How to create a light to dark mode for HTML CSS & Vanilla Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *