Search bar 2

Programming Language : programming_language : CSS

Mayank Kolwal

Email

1000088362.png

To create the Search bar in your website

0
HTML Code
<div class="search-box">
    <span class="icon">🔍</span>
    <input type="text" placeholder="Search questions, posts, tags...">
    <button>Search</button>
</div>
CSS Code
.search-box{
    display:flex;
    align-items:center;
    max-width:700px;
    margin:30px auto;
    background:#fff;
    border:2px solid #d9d9d9;
    border-radius:16px;
    padding:8px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.search-box .icon{
    font-size:22px;
    margin:0 12px;
    color:#777;
}

.search-box input{
    flex:1;
    border:none;
    outline:none;
    font-size:17px;
    padding:12px 0;
    background:transparent;
}

.search-box button{
    background:#2563eb;
    color:#fff;
    border:none;
    border-radius:12px;
    padding:12px 24px;
    font-size:16px;
    cursor:pointer;
    transition:.3s;
}

.search-box button:hover{
    background:#1d4ed8;
}

Leave a Comment