Cara membuat tombol cantik dengan html dan css

Cara membuat tombol cantik dengan html dan css

Halo soba kak dolop, jumpa lagi nih kita hehe, pada kesempatan kali ini saya akan memberikan tutorial Cara membuat tombol cantik dengan html dan css . Sebenarnya sih sudah banyak juga yang share tutorial yang seperti ini, tapi mungkin dengan tutorial yang saya buat ini bisa bermanfaat dan bisa teman-teman kembangkan lagi nantinya hehe.

Oke langsung saja pertama silahkan buat file beri nama index.html :
Lalu copykan script dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Membuat tombol cantik dengan html dan css</title>
<!-- Memanggil file style.css -->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- class button sebagai induk(main class) untuk mengatur antar class tutunannya -->
<div class="button">
<!-- class turunan jadi di css nya nanti tinggal panggil turunanny saja contoh: btn-success-->
<a href="" class="button btn-success"> Sukses </a>
<a href="" class="button btn-primary"> Berhasil </a>
<a href="" class="button btn-warning"> Hati-hati </a>
<a href="" class="button btn-danger"> Bahaya </a>
</div>
</body>
</html>

Kemudian save dan lihat hasilnya di browser, pasti tampilannya masih biasa saja, karena kita belum memberikan style ataupun hiasan pada tombol button tersebut:
Buat satu file lagi dan beri nama style.css file ini nantinya akan kita panggil ke dalam file index.html "
copykan script dibawah ini ke dalam style.css
body{
/* Mengatur posisi yg ada pada body dan ukuran text */
margin: 45px 45px;
font-family: lucida calligraphy;
}
.button {
/*
Sebagai main class
menghilangkan garis bawah pada text a ,
dan memberi jarak ke kenan antar tombol */
text-decoration: none;
margin-right: 20px;
color: white;
font-weight: bold;
}
/* Turunan class */
.btn-success{
background-color: #45F75A;
padding: 10px 20px;
}
.btn-primary{
background-color: #56C1E9;
padding: 10px 20px;
}
.btn-warning{
background-color: #FCAE49;
padding: 10px 20px;
}
.btn-danger{
background-color: #EF4E4E;
padding: 10px 20px;
}

Kemudian save dan buka lagi file index.html di browser sobat dan jika berhasil maka akan tampil seperti dibawah ini:

Cara membuat tombol cantik dengan html dan css

Untuk penjelasan script nya sendiri sudah saya sertakan di dalam source kode tersebut
Download source kode nya [klik disini]

Related Posts:

0 Response to "Cara membuat tombol cantik dengan html dan css"

Post a Comment

1. Dilarang menggunakan kata-kata kasar atau pornografi.
2. Dilarang menggunakan live link ataupun link biasa.
3. Berkomentarlah dengan komentar yang relevan