Menambahkan Gambar Icon di Button HTML dengan CSS

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
Pada postingan pertama ini saya akan berbagi trik cara mudah menambahkan gambar icon pada Inputan Button HTML dengan CSS. Cara ini bisa teman-teman terapkan untuk mempercantik tampilan website yang kalian buat. trik ini cukup gampang karena menggunakan tool pihak ketiga yaitu Css Sprite Generator yang dapat anda lihat disini. adapun hasil yang akan kita peroleh nantinya seperti gambar dibawah ini.

Menambahkan Gambar Icon di Button HTML dengan CSS

Didunia Web Desain alias Desain Web, teknik ini biasa disebut dengan teknik sprite tapi tentu saja yang dimaksud adalah bukan sprite minuman. teknik sprite ini adalah dengan menggabungkan beberapa icon kedalam sebuah gambar dan nantinya akan digunakan satu persatu dengan bantuan css. tekniknya adalah dengan memanfaatkan lokasi icon pada gambar. contoh gambar sprite adalah seperti dibawah ini. 

Menambahkan Gambar Icon di Button HTML dengan CSS

Lalu? Bagaimana menambahkan gambar icon-icon yang sudah digabungkan tersebut kedalam Button? caranya tidak sulit. silahkan kunjungi. CSS Sprite generator pada link yang sudah saya bagikan pada paragraf diatas. Pada halaman tersebut, anda perlu menambahkan beberapa icon terlebih dahulu setelah itu tunggu prosesnya beberapa menit. Hal ini tergantung pada koneksi internet dan jumlah gambar yang anda load. Jika sudah selesai silahkan klik tombol download maka akan mucul fasilitasi untuk mendownload gambar, code css dan contoh penerapannya (code html)

Menambahkan Gambar Icon di Button HTML dengan CSS

Tambahkan source code berikut pada file CSS yang telah anda download dari css sprite generator tersebut. Download dan letakkan file gambar css sprite generator didalam folder projek anda sehingga struktur foldernya menjadi berikut 

nama-projek
-sprite.css
-sprite.png
-index.html

[class^="cus-"],
[class*=" cus-"] {
  display: inline-block;
  width: 17px;
  height: 16px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("gambarsprite.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}
[class^="cus-"]:last-child,
[class*=" cus-"]:last-child {
  *margin-left: 0;
}

.cus-accept {
    width: 16px;
    height: 16px;
    background-position: -5px -5px;
}

.cus-add {
    width: 16px;
    height: 16px;
    background-position: -31px -5px;
}
... dst ....

Untuk contoh source code HTML yang saya gunakan dapat anda lihat dibawah ini. Perlu anda ketahui pada contoh source code disini saya sudah merubah sprite menjadi cus sehingga code yang awalnya adalah sprite-add menjadi cus-add. Download contoh source codenya disini.

<link href="spritecss.css" type="text/css" rel="stylesheet">
<button><i class="cus-exclamation"></i>Contoh Button</button>
<button><i class="cus-accept"></i>Contoh Button</button>
... dst ....
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

1 comments:

comments
3 January 2017 at 09:39 delete

Mantap Atas Informasi Nya Gan

Reply
avatar

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.