<!-- Navbar -->
<nav class="navbar">
<input type="checkbox" class="search" name="search" id="search">
<label for="search" class="search-label">
<i data-feather="search" class="search-icon"></i>
<i data-feather="x-circle" class="exit-icon"></i>
</label>
</nav>
<!-- Search Box -->
<div class="search-section">
<div class="search-box">
<div class="search-input">
<input type="search" placeholder="Search..." class="input-textarea">
<span><i data-feather="search" class="search-icon"></i></span>
</div>
</div>
</div>
<!-- Content -->
<main class="container">
<content class="home">
<h1>Search Box with Button</h1>
<p>This is example for You, and the coded is very simple</p>
</content>
</main>
<!-- Feather Icons -->
<script>
feather.replace()
</script>// Fonts API
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap");
// Variable
$old_grey: #212121;
$old_grey_alpa: rgba(0, 0, 0, 0.8);
$white: #ffffff;
$red: #f44336;
$montserrat: "Montserrat", sans-serif;
$blue_gradient: linear-gradient(
40deg,
rgba(131, 58, 180, 1) 0%,
rgba(253, 29, 29, 1) 50%,
rgba(252, 176, 69, 1) 100%
);
// Let's Style
body {
font-family: $montserrat;
-webkit-font-smoothing: antialiased;
}
h1 {
font-size: 40px;
color: white;
}
.navbar {
position: absolute;
top: 0;
right: 0;
margin: 2rem;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background: $old_grey;
z-index: 1;
.search {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
}
.search-label {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: $old-grey;
transition: 0.5s all ease;
z-index: 2;
cursor: pointer;
&:hover {
background: $red;
}
}
}
.search-icon,
.exit-icon {
color: $white;
}
.exit-icon {
display: none;
}
.search:checked + .search-label {
.search-icon {
display: none;
}
.exit-icon {
display: block;
}
}
.search-section {
position: absolute;
opacity: 0;
z-index: -1;
transition: 0.5s all ease-in-out;
}
.search-box {
background: $old_grey_alpa;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.search-input {
width: 70%;
border: 2px solid $white;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.input-textarea {
position: relative;
background: transparent;
width: 100%;
height: 40px;
padding: 10px;
color: white;
z-index: 2;
border: none;
cursor: pointer;
font-family: $montserrat;
}
span {
margin-right: 10px;
}
}
.open {
opacity: 1;
z-index: 0;
transition: 0.5s all ease-in-out;
}
.container {
width: 100vw;
height: 100vh;
}
.home {
line-height: 1.2;
width: 100%;
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: $blue_gradient;
}
$(document).ready(function() {
$(".search").click(function() {
$(".search-section").toggleClass("open");
});
});
External CSS
This Pen doesn't use any external CSS resources.