Cara Membuat CSS Button dengan Ikon tanpa Image

Buat button dapat dilakukan sepenuhnya dengan CSS dan ikon tanpa menggunakan image. Saya menemukan bahwa ada banyak ikon yang dapat digunakan dengan menggunakan Heksadesimal entity. Berikut adalah daftar dimana anda dapat menemukan kode Heksadesimal untuk icon button anda.
     Unicode codepoint Bagan
     Unicode Standard
     UTF-8 encoding table and Unicode characters
Sekarang mari kita melihat bersama bagaimana kita bisa menggunakan ikon2 di atas untuk membuat button.
Langkah 1: Membuat Button
Pertama, kita harus membuat buttonnya. Pembuatan button dibawah ini menggunakan CSS3 Rounded Corner Rectangle. Kopi kode CSS di bawah ini untuk membuat button.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.buttons { display: inline-block; background: #eeeeee; /* Old browsers */ background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */ border: 1px solid #a1a1a1; padding: 0 2em; margin: 0.5em; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: #333; -moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius: .2em; }

Langkah 2: Penambahan :before Selector
Setelah kita sudah membuat button, kita perlu menambahkan :before selector untuk menambahkan konten ke button kita.
Kopi kode CSS di bawah ini untuk menggunakan :before selector.

?

1 2 3 4 5 6 7 8 9 10

.buttons:before { float: left; width: 1em; text-align: center; font-size: 1.7em; margin: 0 0.5em 0 -1em; padding: 0 .2em; pointer-events: none; }

Untuk menambahkan ikon ke button kita, kita perlu menggunakan properti CSS "content".
Lihat contoh2nya di bawah ini:

Form Buttons

?

1 2 3 4 5 6 7

/*Forms*/ .add:before    { content: "\271A"; } .edit:before   { content: "\270E"; } .delete:before { content: "\2718";} .save:before   { content: "\2714";} .email:before  { content: "\2709";} .cross:before  { content: "\2716"; }

Button Add Edit Delete Save Email cross

Currency

?

1 2 3 4 5

/*Currency*/ .dollar:before { content:"\0024"; } .euro:before   { content:"\20AC"; } .pound:before  { content: "\00A3"; } .cent:before   { content: "\20B5"; }

Dollar Euro Cent Pound

Temperature

?

1 2 3

/*Temp*/ .celsius:before    { content: "\2103"; } .fahrenheit:before { content: "\2109"; }

Celsius Fahrenheit

Math Symbols

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/*Math & Factions*/ .pi:before            { content: "\213C"; } .one_thrid:before     { content: "\2153"; } .two_thrid:before     { content: "\2154"; } .one_fifth:before     { content: "\2155"; } .two_fifth:before     { content: "\2156"; } .three_fifth:before   { content: "\2157"; } .four_fifth:before    { content: "\2158"; } .one_sixth:before     { content: "\2159"; } .five_sixth:before    { content: "\215A"; } .one_eighth:before    { content: "\215B"; } .three_eighth:before  { content: "\215C"; } .five_eighth:before   { content: "\215D"; } .seven_eighth:before  { content: "\215E"; } .quarter:before       { content: "\00BC"; } .halff:before          { content: "\00BD"; } .three_quarter:before { content: "\00BE"; }

pi One Thrid Two Thrid One Fifth Two Fifth Three Fifth Four Fifth One Sixth Five Sixth One Eighth Three Eighth Five Eighth Seven Eighth Quarter Half Three Quarter

Arrows

?

1 2 3 4 5 6 7 8 9 10

/*Arrows*/ .next:before             { content: "\279C"; } .left_arrow:before       { content: "\2190"; } .up_arrow:before         { content: "\2191"; } .right_arrow:before      { content: "\2192"; } .down_arrow:before       { content: "\2193"; } .up_left_arrow:before    { content: "\2196"; } .up_right_arrow:before   { content: "\2197"; } .down_left_arrow:before  { content: "\2199"; } .down_right_arrow:before { content: "\2198"; }

Left Arrow Up Arrow Right Arrow Down Arrow Up Left Arrow Up Right Arrow Down Left Arrow Down Right Arrow Next

Misc Symbols

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

/*Symbols*/ .like:before               { content: "\2764"; } .star:before               { content: "\2605"; } .spark:before              { content: "\2737"; } .play:before               { content: "\25B6"; } .watch:before              { content: "\231A"; } .blacksun:before           { content: "\2600"; } .cloud:before              { content: "\2601"; } .umbrella:before           { content: "\2602"; } .snowman:before            { content: "\2603"; } .blackstar:before          { content: "\2605"; } .whitestar:before          { content: "\2606"; } .blackphone:before         { content: "\260E"; } .whitephone:before         { content: "\260F"; } .saltire:before            { content: "\2613"; } .hot_drink:before          { content: "\2615"; } .skull:before              { content: "\2620"; } .radioactive:before        { content: "\2622"; } .biohazard:before          { content: "\2623"; } .peace:before              { content: "\262E"; } .yingyang:before           { content: "\262F"; } .frowning_face:before      { content: "\2639"; } .smiling_face:before       { content: "\263A"; } .first_quarter_moon:before { content: "\263D"; } .last_quarter_moon:before  { content: "\263E"; } .wheelchair:before         { content: "\267F"; } .recycle:before            { content: "\267D"; } .recycle2:before           { content: "\267C"; } .music_note:before         { content: "\266C"; } .warning:before            { content: "\26A0"; } .male_and_female:before    { content: "\26A4"; } .scissors:before           { content: "\2701"; } .airplane:before           { content: "\2708"; } .snow:before               { content: "\2042"; }

Like Star Spark Play Snow Blacksun Cloud Umbrella Snowman Blackstar Whitestar Blackphone Saltire Hot Drink Skull Radioactive Biohazard Peace YingYang Frowning Face Smiling Face First Quarter Moon Last Quarter Moon Wheelchair Recycle Recycle2 Music Note Warning Male And Female Scissors Airplane