Search Bars

by GerĂłnimo Garcia Sgritta

HTML

<section class="search1">
    <input type="text" placeholder=Search... />
    <input type="text" />
    <input type="submit" value="Search" />
</section>

<section class="search2">
    <input type="text" placeholder=Search... />
    <input type="text" />
    <input type="submit" value="Search" />
</section>

<section class="search3">
    <input type="text" placeholder=Search... />
    <input type="text" />
    <input type="submit" value="Search" />
</section>

CSS

section{
    padding:40px 20px;
}

input[type=submit]{
    background-color:#dcecf3;
    padding:6px;
    border:1px solid #a6c0c9;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ecf5f8), color-stop(100%,#cfe6ef));
    color:#6b97a8;
    font-weight:bold;
    text-shadow: 0 1px 1px white;
    cursor:pointer;
    margin-left: -5px;
}

input[type=submit]:hover{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfe6ef), color-stop(100%,#ecf5f8));    
}

.search1{
   ...