Animated Search Bar Code | Stylish Search Box In Html Css Code







Animated Search Bar Code | Stylish Search Box In Html Css Code

Welcome🎉 to Code With Random blog. In this blog, we learn how to create an Animated Search Bar. We use HTML & CSS  for Animated Search Bar. Hope you enjoy our blog so let’s start with a basic HTML structure for the Animated Search Bar. 

HTML code

 <form action="" class="search-bar">  
<input autocomplete="off" type="search" name="search" pattern=".*S.*" required>
<button class="search-btn" type="submit">
<span>Search</span>
</button>
</form>

There is all HTML code for the Animated Search Bar. Now, you can see output without CSS, then we write CSS for the Animated Search Bar.

Output

Animated Search Bar Code | Stylish Search Box In Html Css Code

CSS code

 * {  
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-size: calc(16px + (24 - 16)*(100vw - 320px)/(1920 - 320));
}
body, button, input {
font: 1em Hind, sans-serif;
line-height: 1.5em;
}
body, input {
color: #171717;
}
body, .search-bar {
display: flex;
}
body {
background: #f1f1f1;
height: 100vh;
}
.search-bar input,
.search-btn,
.search-btn:before,
.search-btn:after {
transition: all 0.25s ease-out;
}
.search-bar input,
.search-btn {
width: 3em;
height: 3em;
}
.search-bar input:invalid:not(:focus),
.search-btn {
cursor: pointer;
}
.search-bar,
.search-bar input:focus,
.search-bar input:valid {
width: 100%;
}
.search-bar input:focus,
.search-bar input:not(:focus) + .search-btn:focus {
outline: transparent;
}
.search-bar {
margin: auto;
padding: 1.5em;
justify-content: center;
max-width: 30em;
}
.search-bar input {
background: transparent;
border-radius: 1.5em;
box-shadow: 0 0 0 0.4em #171717 inset;
padding: 0.75em;
transform: translate(0.5em,0.5em) scale(0.5);
transform-origin: 100% 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.search-bar input::-webkit-search-decoration {
-webkit-appearance: none;
}
.search-bar input:focus,
.search-bar input:valid {
background: #fff;
border-radius: 0.375em 0 0 0.375em;
box-shadow: 0 0 0 0.1em #d9d9d9 inset;
transform: scale(1);
}
.search-btn {
background: #171717;
border-radius: 0 0.75em 0.75em 0 / 0 1.5em 1.5em 0;
padding: 0.75em;
position: relative;
transform: translate(0.25em,0.25em) rotate(45deg) scale(0.25,0.125);
transform-origin: 0 50%;
}
.search-btn:before,
.search-btn:after {
content: "";
display: block;
opacity: 0;
position: absolute;
}
.search-btn:before {
border-radius: 50%;
box-shadow: 0 0 0 0.2em #f1f1f1 inset;
top: 0.75em;
left: 0.75em;
width: 1.2em;
height: 1.2em;
}
.search-btn:after {
background: #f1f1f1;
border-radius: 0 0.25em 0.25em 0;
top: 51%;
left: 51%;
width: 0.75em;
height: 0.25em;
transform: translate(0.2em,0) rotate(45deg);
transform-origin: 0 50%;
}
.search-btn span {
display: inline-block;
overflow: hidden;
width: 1px;
height: 1px;
}
/* Active state */
.search-bar input:focus + .search-btn,
.search-bar input:valid + .search-btn {
background: #2762f3;
border-radius: 0 0.375em 0.375em 0;
transform: scale(1);
}
.search-bar input:focus + .search-btn:before,
.search-bar input:focus + .search-btn:after,
.search-bar input:valid + .search-btn:before,
.search-bar input:valid + .search-btn:after {
opacity: 1;
}
.search-bar input:focus + .search-btn:hover,
.search-bar input:valid + .search-btn:hover,
.search-bar input:valid:not(:focus) + .search-btn:focus {
background: #0c48db;
}
.search-bar input:focus + .search-btn:active,
.search-bar input:valid + .search-btn:active {
transform: translateY(1px);
}
@media screen and (prefers-color-scheme: dark) {
body, input {
color: #f1f1f1;
}
body {
background: #171717;
}
.search-bar input {
box-shadow: 0 0 0 0.4em #f1f1f1 inset;
}
.search-bar input:focus,
.search-bar input:valid {
background: #3d3d3d;
box-shadow: 0 0 0 0.1em #3d3d3d inset;
}
.search-btn {
background: #f1f1f1;
}
}

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output

Animated Search Bar Code | Stylish Search Box In Html Css Code

Animated Search Bar Code | Stylish Search Box In Html Css Code

Now we have completed our CSS section,  Here is our updated output with CSSHope you like the Animated Search Bar, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create an Animated Search Bar using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Jon Kantner

Check out more…..



Share on:

Leave a Comment