Hallo, ketemu lagi dengan saya, kali ini saya akan berbagi tutorial mengenai bagaimana Membuat Button Bayangan Dengan HTML-CSS3, barangkali diantara kalian ada yang masih bingung ingin membuat tampilan button yang menarik seperti apa, berikut saya kasih referensi button yang mungkin bisa kalian pakai.
Langsung saja silakan buka teks editornya terlebih dahulu, kemudian ketikan kode HTML berikut.
|
1 2 3 4 |
<a href="#" class="action-button shadow animate blue">Home</a> <a href="#" class="action-button shadow animate red">About</a> <a href="#" class="action-button shadow animate green">Service</a> <a href="#" class="action-button shadow animate yellow">Contact?</a> |
Setelah itu, lanjutkan untuk kode CSS3 berikut untuk mempercantik tampilan button.
|
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 |
.animate { transition: all 0.1s; -webkit-transition: all 0.1s; } .action-button { position: relative; padding: 10px 40px; margin: 0px 10px 10px 0px; float: left; border-radius: 10px; font-family: 'Pacifico', cursive; font-size: 25px; color: #FFF; text-decoration: none; } .blue { background-color: #3498DB; border-bottom: 5px solid #2980B9; text-shadow: 0px -2px #2980B9; } .red { background-color: #E74C3C; border-bottom: 5px solid #BD3E31; text-shadow: 0px -2px #BD3E31; } .green { background-color: #82BF56; border-bottom: 5px solid #669644; text-shadow: 0px -2px #669644; } .yellow { background-color: #F2CF66; border-bottom: 5px solid #D1B358; text-shadow: 0px -2px #D1B358; } .action-button:active { transform: translate(0px,5px); -webkit-transform: translate(0px,5px); border-bottom: 1px solid; } |
Kalo sudah semua diketikan, jangan lupa disimpan, kemudian jalankan dibrowser masing-masing, dan lihat hasilnya.
Cukup mudah, dan menarik sekali button nya bukan ? baik sampai disini tutorial mengenai bagaimana Membuat Button Bayangan Dengan HTML-CSS3, semoga bermanfaat, amin.
Selamat mencoba.