Awesome CSS Search Box Using Only HTML & CSS

DarkCode in Facebook
Paypal Donation Link

Music Name : Different Heaven – Nekozilla (LFZ Remix) [NCS Release]
Music Link :
Artist Social Networks :

Different Heaven

30 Responses

  1. ℱ૯રήલήÐᏇ ℱT at |



    <!DOCTYPE html>
    <html lang="es">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <title>Caja de Busqueda con efecto</title>
    <div class="buscar-caja">
    <input type="text" name="" class="buscar-txt" placeholder="Buscar…"/>
    <a class="buscar-btn">
    <i class="far fa-search"></i>

    body {
    margin: 0;
    padding: 0;
    background: #e84118;

    .buscar-caja {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #2f3640;
    height: 40px;
    border-radius: 40px;
    padding: 10px;

    .buscar-caja:hover > .buscar-txt {
    width: 240px;
    padding: 0 6px;

    .buscar-caja:hover > .buscar-btn {
    background: white;
    color: black;

    .buscar-btn {
    color: #e84118;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2f3640;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
    color: white;
    cursor: pointer;

    .buscar-btn > i {
    font-size: 30px;

    .buscar-txt {
    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    color: white;
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;
    width: 0px;
    font-weight: bold;

  2. SUNNY KUMAR at |


  3. avula sekhar at |

    Super… very excited to watched this video

  4. Ye Yint Maung at |


  5. Sanjay Edits at |

    Where is Paste

  6. Lokesh Acharaya at |

    Excellent Video. Good job.


    Thanks for introducing very easyeiest method

  8. steven alvarado paez at |

    I love you code
    PD: i dont speak inglish :'v

  9. Jaspreet Hayer at |


  10. Nirmal Balami at |

    Hello can you make video step by step

  11. Aryan Jaiswal at |

    Is it responsive

  12. ႩႽ Ⴉ ეႬiRႩႺ at |

    Konsa software uSE kar rhe ho CSS and HTML me liye

  13. Drubh Chandra at |


  14. Humptyk mcoc at |

    Can u send me same code only with click event instead of hover

  15. Click Tik Tok at |

    thanks year

  16. Abdelrahman Magdy at |

    many thanks
    i did it in codepen here

  17. Sitti Rahmah Nur at |

    What text editor do you use?

  18. Harsh 00 at |

    This search bar is awesome! 😆 I love it!

  19. william5862 at |

    Silence is much better than this upsetting sound

  20. ERASER CS at |

    So good. So, I like it)

  21. Azharul Islam at |

    thanks for video

  22. Jean Pablo at |

    dank tutorial but fuck your music

  23. eScape CS at |

    How can i make the search bar in the top right?

  24. Murilo Silva at |

    You helped me a lot bro. One more subscriber. Mais um fã e Brasileiro.

  25. Npr Jamil at |

    Outstanding bro…. I really love this box as a I'm beginner

  26. N I T R O at |


  27. Mobby Cheater at |

    Is better with ::placeholder {color: white;}

  28. Wyatt Lee at |

    What coding platform did you use?

  29. Kean at |

    Very good and easy video! But if I don't want it in the middle, let's say in the top left instead, how do I move it up there?

  30. Mohit Arora at |

    I did the same thing for hover on button to get text but this is not working