Awesome CSS Search Box Using Only HTML & CSS



DarkCode in Facebook
https://www.facebook.com/groups/704904666369941/
Paypal Donation Link
https://paypal.me/YBenlachheb

_Music___
Music Name : Different Heaven – Nekozilla (LFZ Remix) [NCS Release]
Music Link : https://www.youtube.com/watch?v=4ZvnbsfXRk0
Artist Social Networks :
LFZ
• https://www.facebook.com/lfzmedia/
• https://soundcloud.com/lfzmusic
• https://twitter.com/imLFZ

Different Heaven
• https://soundcloud.com/different-heaven
• https://www.facebook.com/DifferentHeaven
• https://twitter.com/DifferentHeaven

30 Responses

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

    Code:

    HTML:

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <title>Caja de Busqueda con efecto</title>
    </head>
    <body>
    <div class="buscar-caja">
    <input type="text" name="" class="buscar-txt" placeholder="Buscar…"/>
    <a class="buscar-btn">
    <i class="far fa-search"></i>
    </a>
    </div>
    </body>
    </html>

    CSS:
    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 |

    Amazing

  3. avula sekhar at |

    Super… very excited to watched this video

  4. Ye Yint Maung at |

    Thanks!

  5. Sanjay Edits at |

    Where is Paste

  6. Lokesh Acharaya at |

    Excellent Video. Good job.

  7. DEEPA DAMODAR at |

    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 |

    Stunning

  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 |

    Brilliant

  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
    https://codepen.io/1abdelrahman/pen/XQpwjx

  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 |

    Nice

  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