Membuat Tombol BUTTON 3D Menarik Menggunakan HTML dan CSS

Membuat Tombol BUTTON 3D Menarik Menggunakan HTML dan CSS
Daftar Isi Artikel

Asalamualaikum Wr Wb..
Salam Sejahterah untuk kita semua. Semoga Allah SWT senantiasa memberi Rahmad dan Hidayahnya Kepada kita dalam menjalankan aktifitas sehari-hari Amin.. :)

Selamat malam untuk Kawan Kawan K0DE TANI di manapun kalian berada.

Ok malam ini saya akan membagikan Source Code Tombol BUTTON 3D sederhana yang menarik.

Baik langsung aja caranya seperti biasa yang kita lakukan yaitu membuka aplikasi teks editor, kawan kawan boleh pakai aplikasi apa aja, mau notpad, tekseditor, sublimetext, dan masih banyak lagi.

jika sudah terbuka, buat file dengan nama index.html atau index.php. tergantung selera yang mana, lalu pastekan code HTML di dalam file index.html, dan begitu juga dengan code css masuka ke file style.css :

See the Pen qQBKaP by Yusuf Syahmuda BatuBara (@yusuf-syahmuda-batubara) on CodePen.



Selanjutnya silahkan tuangkan ide ide kreatif kawan kawan untuk mengembangkan secript HTML dan CSSnya.

Untuk source codenya silahkan Download Disini
Ini Link
By Ini Link

Surat Al-Hujurat ayat 6 : يَا أَيُّهَا الَّذِينَ آمَنُوا إِنْ جَاءَكُمْ فَاسِقٌ بِنَبَإٍ فَتَبَيَّنُوا أَنْ تُصِيبُوا قَوْمًا بِجَهَالَةٍ فَتُصْبِحُوا عَلَى مَا فَعَلْتُمْ نَادِمِينَ "Wahai orang-orang yang beriman, jika datang seorang yang fasik kepadamu membawa berita, maka tangguhkanlah (hingga kamu mengetahui kebenarannya) agar tidak menyebabkan kaum berada dalam kebodohan (kehancuran) sehingga kamu menyesal terhadap apa yang kamu lakukan".

Subscribe

  1. Untuk membuat judul komentar, gunakan <i rel="h2">Judul Komentar</i>
  2. Untuk membuat kotak catatan, <i rel="quote">catatan</i>
  3. Untuk membuat teks stabilo, <i rel="mark">mark</i>
  4. Untuk membuat teks mono, <i rel="kbd">kbd</i>
  5. Untuk membuat kode singkat, <i rel="code">shorcode</i>
  6. Untuk membuat kode panjang, <i rel="pre"><i rel="code">potongan kode</i></i>
  7. Untuk membuat teks tebal, <strong>tebal</strong> atau <b>tebal</b>
  8. Untuk membuat teks miring, <em>miring</em> atau <i>miring</i>