Animated Search Bar Code | Stylish Search Box In Html Css Code
Animated Search Bar Code | Stylish Search Box In Html Css Code
.png "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
CSS code
Do you want to learn HTML to React? 🔥
If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions
Get your eBook now! 👇
* {
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
