Cara membuat animasi search box sederhana menggunakan html dan css

Terima kasih sudah mau berkunjung lagi ke sini, projects yang akan saya bagikan kali ini adalah Cara membuat animasi Search box sederhana yang dimana hanya menggunakan html dan css ajah. Lihat aja pada gambar dibawah atau bisa gulir ke bawah untuk liatin preview nya oke. Seperti biasa langsung ajah ke codingannya. Selamat menggulir - gulir.

Catatan : seperti biasa jangan aneh sama tampilan code snippetnya, susah buat ngatur ini itunya jadi agak ribet

Kode html bisa dilihat diatas :

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Search.css"> 
<title>Animation Search Box | Sicoding Turu</title> 
</head>
<body>
<form action="" class="search-bar">
<input type="search" name="search" pattern=".*\S.*" placeholder="ketik angka 1 untuk senang..." required>
<button class="search-btn" type="submit">
<span>Search</span>
</button>
</form>
</body>
</html>

Kode CSS nya bisa lihat dibawah kasur anda :

* {
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: #007aff;
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;
}

.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;
}
}

Hasil dari codingan diatas :

Itulah tadi kode kode yang bisa kalian salin maupun paste. Ingat, tidak ada roti yang enak jika tidak dipanggang terlebih dahulu mwehehe. Seperti biasa, jika kalian tidak mau ribet ribet copy itu ini. Saya sudah menyiapkan link untuk kalian download, mudah kan. Terima kasih karena sudah mau menyempatkan untuk membaca blog saya.

Bisa klik disini oke.. Link downlload

Untuk projek lainnya bisa dilihat disini : List Projects