HTML/CSS - Search form with animated search button

HTML/CSS - Search form with animated search button

Hello colleagues.

In today's article, we will show you how to create a user-friendly search bar using pure HTML and CSS. This is a pure CSS search box. The search icon changes when you hover over it. This effect has a smooth transition.

 

HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search Form With Animated Search Button</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="cover">
    <form method="get" action="">
        <div class="tb">
            <div class="td"><input type="text" placeholder="Search" required></div>
            <div class="td" id="s-cover">
                <button type="submit">
                    <div id="s-circle"></div>
                    <span></span>
                </button>
            </div>
        </div>
    </form>
</div>
</body>
</html>

 

CSS code.

* {
    outline: none;
}
html,
body {
    height: 100%;
    min-height: 100%;
}
body {
    margin: 0;
    background-color: #ffd8d8;
}
.tb {
    display: table;
    width: 100%;
}
.td {
    display: table-cell;
    vertical-align: middle;
}
input,
button {
    color: #fff;
    font-family: Nunito;
    padding: 0;
    margin: 0;
    border: 0;
    background-color: transparent;
}
#cover {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 550px;
    padding: 35px;
    margin: -83px auto 0 auto;
    background-color: #ff7575;
    border-radius: 20px;
    box-shadow: 0 10px 40px #ff7c7c, 0 0 0 20px #ffffffeb;
    transform: scale(0.6);
}
form {
    height: 96px;
}
input[type="text"] {
    width: 100%;
    height: 96px;
    font-size: 60px;
    line-height: 1;
}
input[type="text"]::placeholder {
    color: #e16868;
}
#s-cover {
    width: 1px;
    padding-left: 35px;
}
button {
    position: relative;
    display: block;
    width: 84px;
    height: 96px;
    cursor: pointer;
}
#s-circle {
    position: relative;
    top: -8px;
    left: 0;
    width: 43px;
    height: 43px;
    margin-top: 0;
    border-width: 15px;
    border: 15px solid #fff;
    background-color: transparent;
    border-radius: 50%;
    transition: 0.5s ease all;
}
button span {
    position: absolute;
    top: 68px;
    left: 43px;
    display: block;
    width: 45px;
    height: 15px;
    background-color: transparent;
    border-radius: 10px;
    transform: rotateZ(52deg);
    transition: 0.5s ease all;
}
button span:before,
button span:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 45px;
    height: 15px;
    background-color: #fff;
    border-radius: 10px;
    transform: rotateZ(0);
    transition: 0.5s ease all;
}
#s-cover:hover #s-circle {
    top: -1px;
    width: 67px;
    height: 15px;
    border-width: 0;
    background-color: #fff;
    border-radius: 20px;
}
#s-cover:hover span {
    top: 50%;
    left: 56px;
    width: 25px;
    margin-top: -9px;
    transform: rotateZ(0);
}
#s-cover:hover button span:before {
    bottom: 11px;
    transform: rotateZ(52deg);
}
#s-cover:hover button span:after {
    bottom: -11px;
    transform: rotateZ(-52deg);
}
#s-cover:hover button span:before,
#s-cover:hover button span:after {
    right: -6px;
    width: 40px;
    background-color: #fff;
}

 

Thank you all, I hope my article was of some help to you.

 

SIMILAR ARTICLES

jQuery carousel with magnifying glass effect
jQuery carousel with magnifying glass effect
WEB
jQuery plugin to enlarge image with magnifying glass
jQuery plugin to enlarge image with magnifying glass
WEB
jQuery - Image gallery with zoom on hover
jQuery - Image gallery with zoom on hover
WEB