Hallo teman-teman pada kesempatan kali ini saya akan membahas tentang cara Membuat Button Hover Animasi Part IV.
Seperti pada materi pembahasan sebelumnya tentang Membuat Button Hover Animasi Part I dan Part II dan Part III Sebelumnya dalam Membuat Button Hover Animasi. Teman-teman harus sudah menguasai tentang HTML, CSS, dan Jquery. Karena kalau belum menguasai atau belum mengenal ketiga bahasa itu maka teman-teman akan sulit dalam memahaminya.
Baca artikel sebelumnya :
- Membuat Button Hover Animasi Part I.
- Membuat Button Hover Animasi Part II.
- Membuat Button Hover Animasi Part III.
Oke tanpa panjang lebar, langsung saja kita mulai dalam Membuat Button Hover Animasi Part IV. Pertama-tama buka text-editornya terlebih dahulu lalu ketikan script htmlnya seperti dibawah ini :
|
1 2 3 |
div class="wrapper"> <a href="#" class="btn">DumetSchool</a> </div> |
Jika sudah sekarang teman-teman masukan script cssnya seperti 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 |
html { font-size: 20px; box-sizing: border-box; } body { background-color: #1abc9c; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .btn { border: 5px solid #2c3e50; color: #2c3e50; display: block; font-family: 'trebuchet ms'; font-size: 2rem; letter-spacing: 0.1rem; padding: 1rem; position: relative; text-decoration: none; text-transform: uppercase; } .btn::before { content: ""; background-color: #E26A6A; box-shadow: 10px 10px 0 #F1C40F, 20px 20px 0 #3498DB; position: absolute; left: 0.25rem; top: 0.5rem; height: 102%; width: 102%; z-index: -1; transition: all 0.4s ease; } .btn:hover::before { box-shadow: none; left: 0; top: 0; width: 100%; height: 100%; } |
Jika sudah selanjutnya teman-teman simpan dan run/jalankan dibrowser yang teman-teman gunakan. Maka hasilnya akan seperti pada gambar dibawah ini :
Jika hasilnya sudah seperti pada gambar diatas maka teman-teman telah berhasil dalam Membuat Button Hover Animasi Part IV.
Oke sekian pembahasan kali ini semoga dapat bermanfaat untuk teman-teman.
Sampai bertemu dipembahasan selanjutnya ya. Terimakasih
