Cara Membuat Button Dengan HTML Dan CSS Paling Keren. Menerjuni dunia blogging ternyata sangat menyenangkan. Rasa senang ini muncul ketika di hadapkan pada suatu masalah yang bikin penasaran. Setelah penasaran tersebut terjawab, maka rasa kebahagian pun akhirnya timbul. Termasuk salah satu persoalan ngeblog yang sangat menarik adalah tentang coding.
Bahasa Coding di kalangan blogger memang sudah familiar. Siapa pun blogger yang pernah otak-atik kode-kode HTML dan CSS pastinya sudah kenal dekat dengan istilah Coding ini. Coding kalau di artikan dalam bahasa indonesia adalah "pengkodean". Dan arti secara luasnya adalah menulis atau mempelajari kode-kode tertentu seperti Javascript, Html dan Css.
Bagi Admin, mempelajari kode-kode tersebut sangat menarik dan penting sekali di lakukan oleh para blogger. Paling tidak kita harus mempelajari kode dasarnya terlebih dahulu. Setelah itu kita kembangkan sendiri menurut keinginan kita.
Sebenarnya pengkodean tersebut kalau kita benar-benar mau belajar pasti bisa. Dengan syarat harus tekun, telaten dan praktik setiap hari, di jamin pasti bisa. Setelah menguasai kode-kode dasarnya dan bisa praktik dengan baik. Maka akan timbul lagi pertanyaan lain dalam diri kita. Sebab rasa penasaran dan ingin tahu tentang pengkodean lainnya, ini akan muncul terus-menerus.
Di sinilah letak keasyikan dunia blogging, terutama di bidang coding. Semakin kedalam semakin banyak teka-teki atau tantangan dan kita harus bisa menjawabnya. Seperti halnya yang pernah Admin alami sendiri saat melihat sebuah blog/website menampilkan button yang sangat keren.
Maka di dalam hati pun bertanya-tanya, bagaimana ya cara membuat button yang bagus dan keren tersebut?. Bagaimana ya cara membuat warna background dan link Url pada button Html dan Css?. Maka untuk mencari jawabannya, langsung browsing dan mendapatkan jawaban beserta kodenya pada sebuah situs besar.
Selanjutnya, kode-kode tersebut Admin otak-atik dan berhasil membuat bentuk button yang keren. Nah, buat sahabat blogger yang saat ini sedang mencari ilmu cara membuat button. Di bawah ini nanti kamu bisa ambil (copy) secara gratis hasil oprek-oprek script button dari situs lain yang sudah Admin rubah.
Cara Membuat Button Dengan HTML Dan CSS Untuk Pemula
Button merupakan salah satu elemen yang di butuhkan pada sebuah blog/website. Lalu apa sebenarnya yang di namakan button itu?. Button adalah bentuk sebuah tombol dengan background tertentu di tengahnya ada text link yang berfungsi untuk mengakses suatu Url halaman yang di target.
Mungkin para blogger sudah sering melihat pada situs-situs download gambar, atau file-file lainnya. Yang mana situs-situs tersebut secara mayoritas menggunakan tombol atau button sebagai background dan tempat textlink berada.
Sepengetahuan Admin, cara menampilkan button di blog/website ada 2 (dua) macam, yaitu:
1. Gambar Button
Membuat tampilan button dengan file gambar di blog. Caranya kita harus punya file gambar bentuk button terlebih dahulu. Kemudian upload/unggah di blog tempat menyimpan gambar. Selanjutnya cara pasangnya kita copy Url link gambar tersebut, lalu gunakan kode HTML seperti contoh di bawah ini:
Contoh di atas itu hanya menampilkan gambar button saja. Agar button dapat di klik menuju suatu halaman atau link download. Maka cukup menambahkan link Url halaman yang di tuju. Contohnya seperti di bawah ini.
Di atas itu sekedar contoh saja, tentang ukuran gambar, link url gambar serta halaman silahkan di ganti dengan link url asli dari blog Anda.
2. Kode Html Dan Css Button
Cara menampilkan button di blog dengan kode Html dan Css. Untuk melakukan cara ini, kita harus menulis kode Cssnya terlebih dahulu. Kemudian membuat kode Html untuk memanggil bentuk button yang tersusun di kode Css. Untuk contoh kodenya, silahkan baca artikel ini sampai tuntas.
Membuat Button Di Blog Dengan Html Dan CSS beserta Warna
Membuat button Html di blog paling utama kita harus memahami tentang kode-kode yang akan di gunakan. Mulai dari kode Css, Html dan warna yang akan di gunakan. Walaupun kamu masih pemula banget seperti Admin, tapi usahakan untuk mencermati dan mempelajari setiap kode yang akan di bagikan di bawah.
Belajar coding memang butuh kesabaran, sebab tidak cukup dalam satu atau dua hari langsung hafal. Kalau ingin cepat dan instan, ya cukup mencopy saja kode-kode yang tersedia di internet. Tapi, cara seperti ini tidak akan membuat kita bisa memahami coding.
Misalnya kamu habis mencopy kode Css yang agak panjang, ternyata ada kode yang terhapus sedikit. Seumpama mengalami hal semacam ini, kamu pasti tidak bisa membenahinya. Maka dari itu, belajar coding itu penting, walaupun toh cuma dasar-dasarnya saja.
Nah, biar tidak lama-lama menunggu, selanjutnya di bawah ini merupakan cara membuat button dengan HTML dan CSS di blog. Dan Admin telah menyediakan 3 (tiga) bentuk button beserta warna yang cukup keren.
Silahkan lihat contoh pada gambar demo bentuk button (No.1#).
Silahkan copy kode CSS dalam kotak, lalu tempelkan di atas </b:skin> atau di atas </head>. Dan cara ini berlaku untuk kode CSS bentuk yang ke 2 dan 3.
.button{border: none; color: #ffffff; padding: 14px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 15px; margin: 4px 2px; cursor: pointer;} .button1 {background-color: #006622;}
Kemudian untuk menampilkan button di halaman blog, silahkan copy kode HTML di kotak bawah ini.
<button class="button button1">Download Now!</button>
Silahkan lihat demo contoh gambar bentuk button (No.2#).
Silahkan di copy kode CSS di dalam kotak hijau lumut di bawah ini.
.button1 {border: none; color:#ffffff; padding: 15px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 15px; margin: 4px 2px; cursor: pointer; border-radius:22px;} .button2 {background-color: #0022ff;}
Selanjutnya copy kode HTML di bawah ini untuk menampilkan button di halaman blog.
<button class="button1 button2">Click To Join!</button>
Silahkan lihat contoh tampilan bentuk button (No.3#) di bawah ini.
Selanjutnya silahkan di ambil (copy) kode Cssnya di dalam kotak hijau.
.button2{border: none; color: #ffffff; padding: 14px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 15px; margin: 4px 2px; cursor: pointer; border-top-left-radius:26px;border-bottom-right-radius:26px;} .button3{background-color: #ff0000;}
Kemidian untuk menampilkan bentuk button no.3 di blog kamu, silahkan copy kode Html di bawah ini.
<button class="button2 button3">Free Sign Up!</button>
Untuk tampilan warna background atau ukuran text, silahkan di rubah dan kreasikan sendiri menurut kesukaan kamu.
Cara Membuat Button Textlink Dengan HTML Dan CSS
Setelah mengerti tata cara membuat button beserta warnanya. Sekarang kita akan membuat Textlink di tengah button, maksudnya suatu text yang ada pada button tersebut dapat di klik dan mengarah ke suatu halaman lain.
Memang dari segi fungsi button secara umum adalah untuk menempatkan link url suatu halaman tertentu. Namun, pada sisi lain juga dapat di fungsikan untuk memperindah template website/blog.
Lalu bagaimanakah cara membuat button link paling mudah dan simple?. Sebenarnya sama metodenya seperti yang ada di atas. Tapi kita harus menambah beberapa kode yang di perlukan. Silahkan di baca tutorial di bawah ini dan betul-betul di cermati.
Copy kode di bawah ini, dan tempel di atas kode </head> di template blogger kamu.
<style>.button1 {border: none; color:#ffffff; padding: 15px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 15px; margin: 4px 2px; cursor: pointer; border-radius:22px;} .button2 {background-color: #0202ff;} a.button2 {color:#ffffff;}</style>
Selanjutnya copy kode HTML di bawah ini untuk menampilkan button di halaman blog kamu.
<a class="button1 button2" href="https://waphtml.blogspot.com" title="Html Css Button">Click Here Now!</a>
Itulah contoh membuat button link atau textlink yang bisa kamu terapkan. Pada contoh tersebut terdapat link url blog Admin. Silahkan di ganti dengan link url yang kamu inginkan. Tapi jika berkenan menampilkan apa adanya seperti itu, Admin juga mempersilahkan.
Demikian tutorial sederhana tentang Cara Membuat Button Dengan HTML Dan CSS Paling Keren". Semoga bermanfaat...
Tidak ada komentar:
Posting Komentar