Home chevron_right Tutorial chevron_right Membuat Animasi Search Bar Pure CSS

Membuat Animasi Search Bar Pure CSS

Oleh
Membuat Animasi Search Bar Pure CSS


Hallo,sobat Idtemplatez Kali Ini saya akan memberikan Tutorial mengenai Membuat Animasi Search Bar,Pasti kalian pada Tau kan searchbar yang satu ini.. Yaps Search ini banyak di pakai di Web-web Jaman sekarang,

Saya membuatnya Tidak menggunakan Javascript Melainkan Menggunakan CSS Saja.

Demonstrasi ada di bawah :




Jika Kalian Tertarik Silahkan Copy Code CSS Di bawah ini


html, body {
  font-family: 'Roboto Slab',serif;
  height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-shadow: 2px 2px 2px rgb(0, 0, 0, 0.3);
}

body {
  background: linear-gradient(90deg, #a4a9f4 0%, #8362d2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  font-size: 50px;
  font-weight: 400;
}

*, *:before, *:after { box-sizing: inherit; }

#wrap {
  position: relative;
  height: 72px;
}

input {
  height: 72px;
  display: block;
  width: 0px;
  background: none;
  transition: all 0.5s cubic-bezier(1, -0.35, 0.62, 1.35);
  cursor: pointer;
  border: 4px solid #fff;
  cursor: pointer;
  padding: 0 55px 0 15px;
  font-size: 40px;
  color: #FFF;
  text-shadow: 2px 2px 2px rgb(0, 0, 0, 0.3);
  outline: 0;
  font-family: 'Teko';
}

input::placeholder {
  color: #fff;
}

input:focus, button:focus + input {
  padding: 0 75px 0 15px;
  width: 500px;
  z-index: 1;
  cursor: text;
  height: 72px;

}

button {
  width: 78px;
  bottom: 0;
  text-align: center;
  color: #fff;
  cursor: pointer;
  font-size: 40px;
  position: absolute;
  top: 0;
  right: 0;
  background: #9385e3;
  outline: 0;
  border: 4px solid;
  padding: 0;
}

h1 {
  margin: 0;
  font-size: 1.23em;
}


Setelah Itu Letakkan Kode HTML Di bawah Ke dalam Website Kalian
<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    </head>
    <body>
        <h1>Animated Search Bar</h1>
        <div id='wrap'>
            <button type='submit'>
                <i class='fa fa-search'></i>
            </button>
            <input type='text' placeholder='search here....'>
        </div>
    </body>
</html>
Selesai,Kini Template Kalian Telah Mempunyai Animasi Search,selamat belajar dan Terus Lah Beusaha Jangan Lupa Bagikan dan Komentar, Komentar Kalian Saya Tunggu,Sekian..

0 Komentar

Post a Comment

Terimakasih Telah Berkunjung Di Blog Ini ,Dan Patuhi Peraturan Di blog ini
(1) Bertanya Sesuai dengan Topik
(2) Dilarang menaruh Link Aktiv Yang mengarah ke situs (Judi,Porno,Sara)
(3) Gunakan Tata bahasa yang baik Jika berkomentar
(4) Hargailah Komentar/Pendapat Orang

:: Komentar Kalian saya Tunggu::

Subscribe to: Post Comments (Atom)