Membuat Animasi Search dengan HTML dan CSS

Berbicara tentang desain memang tak ada habisnya, semakin berkembangnya teknologi semakin berkembang juga desain terutama desain web, nah kali ini saya akan menshare bagai mana cara Membuat Animasi Search dengan HTML dan CSS,

buat index. html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Search </title>
</head>
<body>
	<div id="container">
      <form action="">
          <input id="search" type="text" placeholder="Apa yang anda Cari ?">
          <input value="" type="submit">
      </form>
    </div>
</body>
</html>

berikut css nya.

@import url('https://fonts.googleapis.com/css?family=Dosis');
body {
  background: #fff;
}
#container {
  margin: 50px 100px;
  position: relative;
  height: 60px;
  float: right;
  padding: 0;
}
input[type="text"] {
  font-family: 'Dosis', sans-serif;
  height: 75px;
  font-size: 50px;
  border: none;
  color: #434B4E;
  padding-right: 60px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 9;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
}
input[type="text"]:focus {
  width: 700px;
  z-index: 1;
  border-bottom: 1px solid #BBB;
  cursor: text;
}
input[type="submit"] {
  height: 100px;
  width: 100px;
  border: none;
  background: url('search.png') center center no-repeat;
}
input[type="submit"]:hover {
  opacity: 0.8;
}

berikut tampilannya.

begitu kita klik bagian tombol search maka akan muncul tulisan Apa yang anda cari?.

sekian tutorial Membuat Animasi Search dengan HTML dan CSS, semoga bermanfaat yah teman teman.