Membuat Search Button Seperti Google

Share

"Om Swastiastu"

Kalian tentunya sudah sangat mengenal search engine Google. Bahkan saya yakin banyak diantara kalian yang menggunakan search engine ini. Desain interface google sederhana namun berkelas. Misalnya saja desain tombol search berwarna biru yang terdapat disamping kanan textbox search google. Tombol search tersebut terkesan mewah menurut saya, simple tapi sangat bagus. Nah, bagi para web programmer yang ingin membuat desain tombol search seperti google, saya akan memberikan caranya dengan menggunakan HTML dan CSS.

Nah, hal pertama yang kalian lakukan adalah membuat input type submit dengan html. Saya yakin kebanyakan dari kalian sudah bisa menggunakannya.

<input type="submit" name="submit" name="submit" value="Submit">

Jika sudah membuat input type submit seperti diatas, silahkan buat kode CSS seperti berikut ini:

#submit {
cursor:pointer;
width:70px;
height: 28px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent; 
background: url(ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}



#submit:hover {
background: url(ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}

Untuk masalah background url yang menggunakan gambar, silahkan kalian gunakan gambar dibawah ini

Gambarnya memang kecil dengan ukuran 17x17. Saya rasa gambar search ini adalah gambar yang cocok. Kalian bisa mengatur kembali kode CSS sesuai dengan kebutuhan kalian sendiri. Semoga kode berguna buat kalian semua.

"Om Santhi, Santhi, Santhi, Om"