Display Search on Button Click with Animation
HTML
<button id="search_button" onclick="search_display()"><i class="fas fa-search"></i></button>
<div id="search"><input type="text" name="search_bar" id="search_bar" placeholder="Search.."><button id="search_button1"><i class="fas fa-search"></i></button></div>
CSS
#search_button,#search_button1 {
float: right;
width: 4vw;
height: 8vh;
border: none;
background: #fedd02;
}
#search_button:hover,#search_button1:hover {
color: white;
}
#search {
display: none;
position: fixed;
top: 6.5vh;
right: 11.8vw;
}
#search_bar {
width: 20vw;
height: 8vh;
background: #000000;
color: #FFFFFF;
animation: 1s fade ease;
}
@keyframes fade {
from {
width: 0;
}
to{
width: 20vw;
}
}
#search_bar::placeholder {
font-weight: 600;
color: #FFFFFF;
padding: 1vh 1vw;
}
JS
<script type="text/javascript">
function search_display() {
var x = document.getElementById("search");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Comments
Post a Comment