Pada tutorial kali ini kodekreasi akan membagikan tutorial tentang bagaimana cara membuat button link di html . Button merupakan salah satu elemen yang sering digunakan pada pemrograman web. Elemen ini biasanya digunakan untuk menyatakan action terhadap suatu aktifitas pada website misalnya submit form , mengarahkan user ke halaaman lain dll.
Pada html khususnya html 5 sendiri elemen button dapat dibuat dengan beberapa cara seperti menggunakan tag Contoh 3 Contoh 4
Untuk mempercantik tampilan button yang telah kita buat diatas agar terlihat lebih keren sekarang kita tambahkan scribt css nya berikut ini kedalam scribt html yang telah kita buat . Untuk menambahkan scribt css tersebut dapat dilakukan dengan 2 cara yaitu bisa dengan menambahkan scribt css di dalam tag terus kita letakkan pada tag html. Atau kalian bisa juga menambahkan file css kedalam folder yang sama dengan file html kita tadi kemudian buat penghubung agar file css tersebut dapat terakses dari scribt html.
.row{
display:flex;
justify-content:center;
margin-top:1rem;
}
.mr-2{
margin-right: 0.5rem;
}
/* css button */
.btn{
font-family: sans-serif; //mengatur jenis font
font-size: 1em; //mengatur ukuran font
background: #ffb74d; //mengatur warna background
color: white; //mengatur warna font
border: white 0.2rem solid; //mengatur border atau garis tepi button
border-radius: 0.5rem; //mengatur radius garis tepi button
padding: 0.8rem 1.8rem; //mengatur jarak padding button
margin-top: 1rem; //mengatur jarak margin bagian atas button
text-decoration:none; //menghilangkan garis bawah pada link
}
/* memberi efek hover pada button */
.btn:hover{
opacity:0.9;
}
Sehingga keseluruhan programnya akan menjadi seperti berikut ini :
Cara Membuat Button di HTML - //kodekreasi.com
.row{
display:flex;
justify-content:center;
margin-top:1rem;
}
.mr-2{
margin-right: 0.5rem;
}
/* css button */
.btn{
font-family: sans-serif; //mengatur jenis font
font-size: 1em; //mengatur ukuran font
background: #ffb74d; //mengatur warna background
color: white; //mengatur warna font
border: white 0.2rem solid; //mengatur border atau garis tepi button
border-radius: 0.5rem; //mengatur radius garis tepi button
padding: 0.8rem 1.8rem; //mengatur jarak padding button
margin-top: 1rem; //mengatur jarak margin bagian atas button
text-decoration:none; //menghilangkan garis bawah pada link
}
/* memberi efek hover pada button */
.btn:hover{
opacity:0.9;
}
Contoh 1
Contoh 3
Contoh 4
Setelah itu coba jalankan scribt tersebut . Ingat jika kalian mau menjalankan scribt tersebut di localhost pastikan web service kalian telah berjalan . Jika kalian belum menginstall web service di komputer kalian , kalian dapat mengikuti tutorial berikut ini tentang cara menginstall xampp di windows . Hasil dari scribt program diatas akan menjadi seperti berikut ini jika dijalankan:
Kalian juga daapat mencoba mempraktikanya secara oline melalui codepen berikut :
See the Pen button html by firman196 [@firman196] on CodePen.
Sekian artikel dari saya kali ini mengenai cara membuat button link di html jangan lupa baca artikel saya yang lain.