Membuat Icon Penelusuran hanya dengan css dan html

Icon penelusuran (simbol pencarian) ini bisa dibuat di editor html yang banyak tersebar di internet. Editor html di gunakan untuk menghindari kesalahan yang dapat mengganggu tema.

Seandainya kebesaran, dapat di kurangi bagian berikut;

.serhbtn {
width: 35px;
height: 35px;
background: green;
border-radius: 20px;
}
.serhbtn .btntengh {
position: absolute;
top: 17px;
left: 17px;
width: 15px;
height: 15px;
background: #fff;
border-radius: 10px;
}

Untuk css dan html icon penelusuran yang sudah jadi seperti gambar posting, kode nya adalah dibawah ini;


 <!DOCTYPE html>
<html>
<head>
<style> 
.serhbtn {
width: 35px;
height: 35px;
background: green;
border-radius: 20px;
}
.serhbtn .btntengh {
position: absolute;
top: 17px;
left: 17px;
width: 15px;
height: 15px;
background: #fff;
border-radius: 10px;
}
.serhbtn .btnstk {
width: 8px;
height: 15px;
background: green;
position: absolute;
rotate: 33deg;
top: 38px;
left: 8px;
}
</style>
</head>
<body>
<div class="serhbtn"><div class="btntengh"></div><div class="btnstk"></div></div>

</body>
</html>

Editor html

Untuk ngetes, ngedit, dan ubah ukuran, kunjungi saja editor ini - Editor Html w3schools.

Untuk pemasangan di blog dan situs, setelah ukuran dan warna, mungkin di beri hover - Sudah pas, kode css letakan di antara kode css.
Kode html search di copy ke form penelusuran untuk mengganti icon yang ada. Perlu sedikit modifikasi untuk ngepasin ke bar/mungkin form penelusuran yang ada.

Tentang Author

Dikirim pada -6 Okt 2023
" Selamat datang, selamat membaca dan selamat berseluncur "

San Tuy

Membuat Icon Penelusuran hanya dengan css dan html

Share ke

Komentari

Posting Komentar

Membuat Icon Penelusuran hanya dengan css dan html

Share ke

Lainnya oleh Santuy :

Komentari

Posting Komentar