Cara membuat search box keren,simple html5 dan css3.

Membuat searchbox  animated dengan html5 dan css 3

ya kali ini saya akan membuat kotak pencarian keren dan unik ya oke langsung saja buat sebuah  sebuah file dengan nama :

index.html

lalu kopikan script berikut

sebelumnya untuk gambar iconnya bisa download disini dan jadikan satu folder dengan index.html tadi download icon.


ini scriptnya:



<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
</style>

</head>
<body>

<p>Animated search form:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>


yang warna merah itu cssnya dan yang item html5nya.



sekian  anda juga bisa demo disini lalu pili try your self


sekian dari saya semoga bisa bermanfaa,

Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...