Cara Membuat Button di HTML dan CSS

-

 Cara Membuat Button di HTML dan CSS




Button adalah salah satu elemen html yang paling sering di jumpai pada suatu website, elemen ini biasanya digunakan untuk submit form atau bisa untuk lainnya. Pada artikel ini saya akan membahas bagaimana cara membuat button di html dan juga css agar tampilannya lebih menarik untuk dilihat.

Di HTML 5, button dapat dibuat dengan menggunakan tag <button> jauh lebih fleksibel karena penggunaannya luas, biasanya sering digunakan dengan event javascript untuk mrmbuat suatu halaman website yang interaktif. Sedangkan untuk tombol dengan tag <input> tipe submit atau reset penggunaannya hanya sebatas pada formulir (form) di html.

Selain menggunakan tag <button> dan <input> tipe submit atau reset, tombol juga dapat dibuat dengan hyperlink (link button) dengan memanfaatkan css kita bisa manipulasi elemen link menjadi seperti tombol/button.


Langkah Ke-1 : Membuat Button di HTML

Buatlah sebuah file dengan nama button.html seperti pada kode html berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Button di HTML - www.kelasprogrammer.com</title>
</head>
<body>
    <button>Button</button>
    <a href="#">Link Button</a>
    <input type="submit" value="Submit Button">
    <input type="reset" value="Reset Button">
</body>
</html>


Hasil :
Dapat dilihat dari gambar diatas tampilan setiap tombol masih belum menarik untuk dilihat, sekarang kita lanjut ke langkah berikutnya untuk membuat style css nya.


Langkah ke-2 : Menambahkan Style CSS pada Button

Tambahkan kode dibawah ini pada file button.html yang telah kita buat diatas. Masukkan kode ini di antara tag <head>.....</head>

    <style>
        a, button,input[type=submit],input[type=reset] {
            font-family: sans-serif;
            font-size: 15px;
            background: #22a4cf;
            color: white;
            border: white 3px solid;
            border-radius: 5px;
            padding: 12px 20px;
            margin-top: 10px;
        }
        a {
            text-decoration: none;
        }
        a:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover{
            opacity:0.9;
        }
    </style>


Hasil :





Penjelasan Kode CSS


Sintax a, button, input [type=submit], input [type=reset] merupakan selector yang terdiri dari elemen html.

    ~ a untuk link

    ~ button untuk tombol button

    ~ input [type=submit] untuk tombol submit

    ~ input [type=reset] untuk tombol reset

Karena kita akan membuat bentuk tombol yang sama sehingga kita satukan setiap selector dalam satu deklarasi perintah CSS yang sama.


Properti yang digunakan adalah: 

    ~ font-family : sans-serif ; merupakan perintah untuk menentukan jenis huruf yang digunakan yaitu
        sans-serif.

    ~ font-size: 15px; Perintah untuk ukuran huruf (15 px)

    ~ background: #22a4cf; Untuk membuat warna latar pada button dengan warna biru muda.

    ~ color: white; Untuk membuat menentukan warna teks yaitu menggunakan warna putih.

    ~ border: white 3px solid; Untuk membuat border dengan warna putih dan ketebalan 3px dengan tipe
        solid.

    ~ border-radius: 5px; untuk membuat setiap sudut button sedeikit melengkung.

    ~ padding: 12px 20px; untuk mengatur jarak atas dan kanan antara teks dengan elemen button .

    ~ margin-top: 10px; untuk mengatur jarak atas antara button dengan elemen lain.

Khusus untuk link kita tambahkan properti text-decoration dengan nilai none untuk menghilangkan dekorasi teks/ garis bawah pada link.

Selanjutnya elemen button juga kita tambahkan efek hover dengan transparansi sebesar 0,9.


Kesimpulan

Sekian artikel mengenai cara membuat tombol (button) di html dengan CSS (Cascading Style Sheets). Semoga membantu teman-teman semua yang lagi belajar desain web.

Tentu saja kalian bisa modifikasi dan mengembangkan sesuai dengan kebutuhan/keinginan kalian.

Yang terpenting adalah mempelajari penggunaan perintah-perintah CSS untuk membuat style yang menarik pada setiap komponen html.

tengkyu ges

Komentar

Posting Komentar

Postingan populer dari blog ini

Pemrograman Pascal Menentukan Subsidi Biaya Pendidikan (If Majemuk)

-
Gambar
Pemrograman Pascal Menentukan Subsidi Biaya Pendidikan (If Majemuk) Buat lah program berdasarkan ilustrasi berikut: (Menggunakan IF Majemuk)  Subsidi biaya pendidikan diberikan oleh pemerintah kepada semua penduduk dengan besaran berbeda tiap anak tiap bulannya, yang hanya diberikan kepada semua keluarga yang memiliki anak usia sekolah (6-17 tahun). Bagi keluarga yang kurang mampu, subsidi menjadi 700 ribu per bulan ditambah dengan bantuan sosial sebesar 400 ribu per bulan. Ukuran keluarga tidak mampu dilihat dari penghasilan dan besarnya konsumsi listrik tiap bulan. Keluarga dikatakan kurang mampu jika penghasilannya kurang dari 2 juta per bulan dan konsumsi listrik kurang dari 100 ribu per bulan. Jika penghasilan >= 2juta dan pemakaian listrik >=100 ribu maka subsidi menjadi 300 ribu per bulan ditambah dengan bantuan sosial sebesar 200 ribu per bulan. Jika penghasilan > 2juta dan pemakaian listrik < 100 ribu maka subsidi menjadi 100 ribu per bulan ditambah den...
Read more »

Part 10 : Perulangan While Pada PHP

-
Gambar
  🌕 Perulangan While Pada PHP          While adalah perintah pada PHP dan bahasa pemrograman lainnya untuk membuat sebuah perulangan yang tidak diketahui berapa kali perulangan tersebut dilakukan.  Untuk contoh penulisan dan struktur cara penggunaan perulangan while pada PHP dapat dilihat pada contoh di bawah ini while( Kondisi ){   Statement. } Dapat dilihat pada contoh penulisan while diatas setelah menuliskan while kemudian di dalam tanda kurung berisi kondisi nilai yang harus terpenuhi agar while dijalankan. Kemudian di dalam tanda kurung kurawal berisi statement yang di jalankan dalam bentuk perulangan apabila kondisi terpenuhi. Statement ini maksudnya adalah perintah syntax yang akan dijalankan dalam bentuk perulangan apabila kondisi terpenuhi. <?php  $x = 1; while ($x <= 10) { echo "Angka $x <br/>"; $x++; }  ?> Perhatikan contoh diatas, perintah while digunakan untuk melakukan perulangan. variabel x mem...
Read more »

Part 11 : Perulangan For Pada PHP

-
Gambar
  🌕 Perulangan For Pada PHP          Perulangan For digunakan untuk membuat sebuah perulangan pada pemrograman termasuk dalam bahasa pemrograman PHP. Tujuan hampir sama dengan while, hanya saja perulangan while memiliki jumlah batas yang tidak diketahui, sedangkan perulangan for memiliki batas berapa kali perulanga di ulangi dan bats dari perulangannya sudah ditentukan pada kondisi perulangan for. Untuk pemahaman yang lebih jelasnya bisa dilihat contoh perulangan for berikut: <?php  for ($i=1; $i <= 10 ; $i++) {     echo $i;   //Membuat perulangan menampilkan angka 1 sampai 10 } ?> Pada contoh perulangan for diatas kita mennetukan variabel i sama dengan 1, kemudian variabel i lebih kecl sama dengan 10, artinya bilangan 1 sampai 10, kemudian menampilkan isi dari variabel dalam bentuk perulangan for dengan menampilannya di dalam perulangan for. Untuk penulisan perulangan for kondisi perulangan diletakkan di dalam tanda...
Read more »