<!DOCTYPE html>
<html>
<head>
<title>Pengenalan css</title>
<style>
button {
margin-bottom: 10px;
}
.satu {
border-radius: 10px;
}
.dua {
background-color: blue;
color: yellow;
border: 2px solid red;
}
.tiga {
box-shadow: 0 8px 16px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
}
.empat {
opacity: 0.5;
cursor: not-allowed;
}
</style>
</head>
<body>
<button class="satu">Tombol</button>
<br>
<button class="dua">Tombol</button>
<br>
<button class="tiga">Tombol</button>
<br>
<button class="empat">Tombol</button>
</body>
</html>
Tag : margin-bottom
untuk memberi jarak antara button
Tag : border-radius
untuk menumpulkan sisi button dan jika di beri 50% maka button akan menjadi eclipse & jika button persegi empat maka akan menjadi lingkaran
Tag : border
untuk memberi garis tepi
Tag : box-shadow
untuk memberi bayangan
Tag : opacity
untuk membuat transparan
Tag : cusor : not-allowed
untuk membuat button tidak dapat di klik
<html>
<head>
<title>Pengenalan css</title>
<style>
button {
margin-bottom: 10px;
}
.satu {
border-radius: 10px;
}
.dua {
background-color: blue;
color: yellow;
border: 2px solid red;
}
.tiga {
box-shadow: 0 8px 16px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
}
.empat {
opacity: 0.5;
cursor: not-allowed;
}
</style>
</head>
<body>
<button class="satu">Tombol</button>
<br>
<button class="dua">Tombol</button>
<br>
<button class="tiga">Tombol</button>
<br>
<button class="empat">Tombol</button>
</body>
</html>
Tag : margin-bottom
untuk memberi jarak antara button
Tag : border-radius
untuk menumpulkan sisi button dan jika di beri 50% maka button akan menjadi eclipse & jika button persegi empat maka akan menjadi lingkaran
Tag : border
untuk memberi garis tepi
Tag : box-shadow
untuk memberi bayangan
Tag : opacity
untuk membuat transparan
Tag : cusor : not-allowed
untuk membuat button tidak dapat di klik
Komentar
Posting Komentar