Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website terutama dalam hal desain website.
Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Animasi Button Delete dengan CSS3. Dipembahasan kali ini tidak jauh berbeda dengan pembahasan yang sebelumnya tentang Animasi Button. Begitu pula jika teman-teman mencari di google pasti sudah banyak tentang cara membuat animasi button yang jauh lebih keren. Namun kali ini saya akan membahas tentang Membuat Animasi Button Delete.
oke teman-teman langsung saja kita mulai Cara Membuat Animasi Button Delete dengan CSS3. Pertama-tama jalankan/run text editornya, lalu kemudian ketik atau copy script HTML dibawah ini :
1 2 3 4 5 6 7 8 |
<button class='centerMe'> <div class='icon'> <i class='fa fa-trash-o'></i> </div> <div class='text'> <span>Delete</span> </div> </button> |
Jika sudah silahkan teman-teman simpan dengan nama button.html, oke untuk HTML kita sudah buat lalu langkah selanjutnya buat file baru lagi dan ketik atau copy script CSS dibawah ini :
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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 |
body { background: #95a5a6; color: #fff; font-family: "Roboto", sans-serif; font-size: 13px; } .centerMe { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } button { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; cursor: pointer; border: 0; background: transparent; outline: 0; overflow: hidden; } button .icon { position: relative; background: #bdc3c7; line-height: 30px; width: 30px; height: 30px; text-align: center; color: #fff; font-size: 18px; -webkit-transition: .2s color; transition: .2s color; border-radius: 2px; } button .icon .fa { width: 30px; -webkit-transition: .2s all; transition: .2s all; } button .icon .fa-check { color: #38B87C; } button .icon .fa-question { color: #2492FF; } button .icon:after { content: ' '; display: block; position: absolute; width: 5px; height: 5px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: #bdc3c7; top: 12.5px; right: 1px; -webkit-transition: .2s right; transition: .2s right; z-index: 1; } button .text { position: relative; width: 0; height: 30px; overflow: hidden; font-family: "Roboto", sans-serif; background: #2980b9; text-align: center; line-height: 30px; color: #fff; font-weight: 300; -webkit-transition: .2s all; transition: .2s all; border-top-right-radius: 2px; border-bottom-right-radius: 2px; } button .text span { width: 100%; opacity: 0; position: absolute; top: -30px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: .3s all; transition: .3s all; } button:hover .icon { color: #F34541; border-radius: 0; border-top-left-radius: 2px; border-bottom-left-radius: 2px; } button:hover .icon:after { right: -2px; } button:hover .text { width: 120px; } button:hover .text span { opacity: 1; top: 0; } button.confirm .icon { border-radius: 0; border-top-left-radius: 2px; border-bottom-left-radius: 2px; } button.confirm .icon .fa { -webkit-transform: translateY(-30px); transform: translateY(-30px); } button.confirm .icon:after { right: -2px; } button.confirm .text { background: #2492FF; width: 120px; } button.confirm .text span { opacity: 1; top: 0; } button.done .icon { border-radius: 0; border-top-left-radius: 2px; border-bottom-left-radius: 2px; } button.done .icon .fa { -webkit-transform: translateY(-60px); transform: translateY(-60px); } button.done .icon:after { right: -2px; } button.done .text { background: #38B87C; width: 120px; } button.done .text span { opacity: 1; top: 0; } @-webkit-keyframes fadeInZoom { 0% { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes fadeInZoom { 0% { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } |
Jika sudah teman-teman simpan code CSS yang diatas dengan nama style.css, maka disini kita sudah mempunya 2 file yaitu button.html dan style.css. lalu langkah selanjutnya kita perlu syntax untuk menghubungkan antara file html dan file css. Teman-teman ketik script dibawah ini dan masukan didalam tag head pada file HTMLnya.
1 |
<link rel="stylesheet" type="text/css" href="style.css"> |
Cara Membuat Animasi Button Delete dengan CSS3
oke teman-teman kita sudah menghubungkan antara file html dan file cssnya, dan langkah selanjutnya silahkan teman-teman ke file htmlnya lalu teman-teman open file atau jalankan dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan seperti pada gambar dibawah ini :
Jika gambar icon trash/tong sampahnya tidak tampil berarti teman-teman kurang 1 script lagi karena disini saya menggunakan icon yang terdapat pada fontawesome, silahkan teman-teman tambahkan script CDN fontawesome seperti dibawah ini dan letakan dibawah script link CSS yang tadi.
1 |
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
dan silahkan teman-teman refresh kembali maka hasilnya sudah pasti sama seperti pada gambar diatas.
Cukup mudah kan teman-teman, jadi seperti itulah hasil dari script yang tadi kita copy atau kita ketik tadi, dan untuk pengembangannya silahkan teman-teman modifikasi sesuai selera teman-teman.
Oke untuk pembahasan kali ini tentang Cara Membuat Animasi Button Delete dengan CSS3 cukup sampai disini dahulu, jika masih banyak kekurangan mohon dimaklumi dan semoga bermanfaat buat teman-teman.
Terimakasih