Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial CSS Bagian 36 : Cara Menggunakan Property Cursor di CSS. Pada tutorial kali ini kita akan belajar cara membuat tombol menggunakan kode-kode CSS.
Dalam HTML, kita menggunakan tag tombol untuk membuat tombol, tetapi dengan menggunakan properti CSS, kita dapat mengatur gaya tombol. Tombol membantu kita membuat interaksi pengguna dan pemrosesan data.
Tombol adalah salah satu elemen halaman web yang banyak digunakan. Untuk pengiriman formulir, untuk melihat atau mendapatkan beberapa informasi, kita biasanya menggunakan tombol.
Mari kita lihat gaya dasar pada tombol.
Gaya dasar di Button
Ada beberapa properti yang tersedia yang digunakan untuk menata elemen button. Mari kita bahas satu per satu.
background-color
Seperti yang telah kita bahas sebelumnya, properti ini digunakan untuk mengatur background-color elemen tombol.
Sintaksis
elemen {
// style background-color
}
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>
Warna latar belakang tombol
</title>
<style>
body{
text-align: center;
}
button {
color:lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
}
.b2 {
background-color: blue;
}
.b3 {
background-color: violet;
}
</style>
</head>
<body>
<h1>Property background-color</h1>
<button class="b1">Tombol berwarna merah </button>
<button class="b2">Tombol berwarna biru </button>
<button class="b3">Tombol bewarna violet</button>
</body>
</html>
Berikut hasil dari kode di atas :
border
Ini digunakan untuk mengatur batas tombol. Ini adalah singkatan untuk property border-width, border-color, dan border-style.
Sintaksis :
element {
// border style
}
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>
Warna latar belakang tombol
</title>
<style>
body{
text-align: center;
}
button {
color:lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
border:none;
}
.b2 {
background-color: blue;
border:5px brown solid;
}
.b3 {
background-color: yellow;
color:black;
border:5px red groove;
}
.b4{
background-color:orange;
border: 5px red dashed;
}
.b5{
background-color: gray;
border: 5px black dotted;
}
.b6{
background-color: lightblue;
border:5px blue double;
}
</style>
</head>
<body>
<h1>Property border</h1>
<button class="b1">none</button>
<button class="b2">solid</button>
<button class="b3">groove</button>
<button class="b4">dashed</button>
<button class="b5">dotted</button>
<button class="b6">double</button>
</body>
</html>Hasil dari kode di atas adalah :
border-radius
Ini digunakan untuk membuat sudut tombol yang membulat. Ini mengatur radius batas tombol.
Sintaksis
element {
// border-radius property
}
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>
Warna latar belakang tombol
</title>
<style>
body{
text-align: center;
}
button {
color:lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
border:none;
}
.b2 {
background-color: blue;
border:5px brown solid;
border-radius: 7px;
}
.b3 {
background-color: yellow;
color:black;
border:5px red groove;
border-radius: 10px;
}
.b4{
background-color:orange;
border: 5px red dashed;
border-radius: 20px;
}
.b5{
background-color: gray;
border: 5px black dotted;
border-radius: 30px;
}
.b6{
background-color: lightblue;
border:5px blue double;
border-radius: 25px;
}
</style>
</head>
<body>
<h1>Property border-radius</h1>
<h2>Dibawah ini adalah nama border dan border-radius</h2>
<button class="b1">none</button>
<button class="b2">solid 7px</button>
<button class="b3">groove 10px</button>
<button class="b4">dashed 20px</button>
<button class="b5">dotted 30px</button>
<button class="b6">double 25px</button>
</body>
</html>
box-shadow
Seperti namanya, itu digunakan untuk membuat bayangan kotak pada tombol. Ini digunakan untuk menambahkan bayangan ke tombol. Kita juga dapat bisa membuat bayangan ketika mengarahkan kursor ke tombol.
Sintaksis :
box-shadow: [horizontal offset] [vertical offset] [blur radius]
[optional spread radius] [color];
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>
Warna latar belakang tombol
</title>
<style>
body{
text-align: center;
}
button {
color:lightgoldenrodyellow;
font-size: 30px;
}
.b1{
background-color: lightblue;
border:5px red double;
border-radius: 25px;
color:black;
box-shadow : 0 8px 16px 0 black,
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.b2{
background-color: lightblue;
border:5px red dotted;
color:black;
border-radius: 25px;
}
.b2:hover{
box-shadow : 0 8px 16px 0 black,
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
<body>
<button class="b1">Bayangan pada tombol </button>
<button class="b2">Bayangan muncul jika kursor diarahkan ke tombol</button>
</body>
</html>
padding
Ini digunakan untuk mengatur padding tombol.
Sintaksis :
element {
// padding style
}
Mari kita pahami dengan menggunakan ilustrasi.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>
Warna latar belakang tombol
</title>
<style>
body{
text-align: center;
}
button {
color:lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
border:none;
padding: 16px;
}
.b2 {
background-color: blue;
border:5px brown solid;
padding:15px 30px 25px 40px;
}
.b3 {
background-color: yellow;
color:black;
border:5px red groove;
padding-top:30px;
}
.b4{
background-color:orange;
border: 5px red dashed;
padding-bottom:40px;
}
.b5{
background-color: gray;
border: 5px black dotted;
padding-left: 40px;
}
.b6{
background-color: lightblue;
border:5px blue double;
padding-right: 40px;;
}
</style>
</head>
<body>
<h1>Property padding</h1>
<button class="b1">none</button>
<button class="b2">solid</button>
<button class="b3">groove</button>
<button class="b4">dashed</button>
<button class="b5">dotted</button>
<button class="b6">double</button>
</body>
</html>Hasil dari kode di atas adalah :
