Ok sobat, artikel kali ini kita belajar cara membuat button atau tombol di html css dengan mudah. Artinya gak perlu banyak kodingan nanti tombol yang kita buat akan cepat selesai.
tak perlu banyak basa-basi lagi kita segera ke tutorialnya.
Cara membuat button/tombol dengan html css
1. Hal yang pertama disini admin akan menggunakan teknik styling css yang dinamakan internal style css.
2. Langsung saja siapkan code editor kesayangan sobat. terserah mau itu visual studio code, notepad ++ dll serta jangan lupa browser kesayangan sobat entah itu chrome, mozilla dll.
3. Mari kita coding 😃. buat sebuah file html di code editor sobat. Kemudian ketik codingan dibawah ini kedalam file html yang sobat buat tadi.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button By Staykoding</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right, #1cbfc3, #99dd99);
}
button {
background: #313131;
border: none;
color: white;
padding: 10px 20px;
border-radius: 5px;
font-size: 2em;
transition: .5s;
}
button:hover {
border: 2px solid #313131;
background: rgba(245, 245, 245, .3);
color: black;
}
</style>
</head>
<body>
<button>Button</button>
</body>
</html>4. Kalau sudah, maka ketika dijalankan dengan browser tampilan dari kodingan diatas akan seperti ini.
apabila pointer kita berada diatas tombol tersebut maka akan berubah warna buttonnya seperti berikut ini
Gimana masih bingung?
ok saya jelaskan kodingan diatas
Penjelasan Kode
untuk kodingan yang seperti dibawah ini. Ini merupakan internal style css yang saya maksud sebelumnya, yaitu kodingan yang ada didalam tag <style></style>.
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right, #1cbfc3, #99dd99);
}
button {
background: #313131;
border: none;
color: white;
padding: 10px 20px;
border-radius: 5px;
font-size: 2em;
transition: .5s;
}
button:hover {
border: 2px solid #313131;
background: rgba(245, 245, 245, .3);
color: black;
}
</style>sementara itu kodingan yang ini:
<button>Button</button>Sudah jelas merupakan elemen html yaitu button yang akan di berikan style css sehingga tampilan dari button yang dibuat akan lebih menarik.
ok cukup sekian artikel saya kali ini. Saya menyadari artikel kali ini merupakan artikel khusu untuk pemula dalam bidang web development.
Semoga bermanfaat ya sobat 😇
0 Komentar