Tombol ialah salah satu jenis elemen navigasi pada halaman web yang mempunyai kegunaan untuk memudahkan dan menunjukkan isu kepada pengunjung website. Hapir setiap hari aku berselancar di dunia internet, aku banyak menjumpai desain tombol-tombol yang unik pada beberapa website, baik itu tombol yang didesain sendiri ataupun yang dari framework, Sehingga pada kesempatan kali ini akan menunjukkan tutorial Cara Membuat Tombol 3D Pada Website.
Bagaimana Cara Membuat Tombol 3D Pada Website
Sebelum teman-teman menulis code dibawah ini, akan menunjukkan sedikit pengetahuan dan klarifikasi untuk tutorial ini. Cara Membuat Tombol 3D Pada Website sangat mudah, dimana cara pembuatannya sama ibarat pada tombol umumnya, akan tetapi pada tutorial ini kita sedikit memanipulasi bab html dengan memakai Pesudo Selector, dimana pesudo selector ini berguna untuk memanipulasi keadaan pada dikala tombol yang kita buat di click, sehigga pada dikala tombol di click maka tombol tersebut mempunyai dampak animasi. Untuk lebih jelasnya silahkan teman-teman tulis code dibawah ini dan simpan dengan nama file index.html atau dengan nama lain yang teman-teman inggikan yang penting extensinya harus html.
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } body { background-color: #eee; font-family: sans-serif; } .button { width: 190px; height: 67px; margin: 200px auto; display: block;; position: relative; border: 2px solid #045f35; border-radius: 11px; background-color: #0b7544; } .button .content { display: block; position: absolute; bottom: 4px; font-size: 20px; line-height: 60px; font-weight: 400; background-color: #19887d; color: white; height: 100%; width: 100%; text-align: center; text-transform: uppercase; box-shadow: 0px 6px 0px #045f35; border-radius: 6px; transition: all 0.15s linear; } .button:active .content { bottom: 0; box-shadow: 0px 0px 0px #045f35; } </style> </head> <body> <a href="#" class="button"> <span class="content">Read more</span> </a> </body> </html> jikalau sudah silahkan teman-teman buka file tersebut pada web browser, maka hasil nya akan ibarat berikut ini.
No comments:
Post a Comment