Cara Membuat Animated Search Form dengan CSS

Orang yang beneran cinta sama kita, nembak bilang “i love u”-nya nggak sendirian. Dia datang serombongan, bareng keluarga besar. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Animated Search Form dengan CSS.

Jika ingin mencari form search tapi yang ingin ada animasi nya. Nah disini saya akan memberitahukan Cara Membuat Animated Search Form dengan CSS. Berikut caranya:

Seperti biasa, terlebih dahulu siapkan file index.html nya.

Kemudian isi di bagian <body> tag-tag HTML seperti berikut.

<p>Animated search form:</p>

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

Setelah itu, isi di bagian CSS.

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

Bagaimana teman-teman? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang bagaimana Cara Membuat Animated Search Form dengan CSS.

Semoga bermanfaat, terima kasih

Cara Membuat Animated Search Form dengan CSS

Kategori