Materi Tentang CSS Part 5

Oleh -
Styling Button


Styling Button berfungsi untuk mengatur atau mengubah sebuah tombol yang sudah kita buat. Kita bisa memberikan warna pada tombol, bayangan, dan bisa mengubah ukuran tombol. Dan sebelumnya kita sudah pernah belajar di html part 5 yaitu cara membuat form dan disana ada cara membuat tombol tetapi itu masih tombol yang biasa - biasa saja yaitu tombol kirim dan hapus. Lalu bagaimana sih cara membuat tombol spesial ( Special Button) ? Ya itu sangatlah mudah. Ok langsung saja kita ke materinya.


Button color
Ini berfungsi untuk memberikan warna pada tombol.

Contoh :

<html>
<head>
<style>
.btn { background-color: #00AA00;}
</style>
</head>

<body>
<button class="btn"> Tombol </button>
</body>
</html>

Hasil :





Button Font Size
Untuk mengatur ukuran pada tombol.

Contoh :

<html>
<head>
<style>
.btn { background-color: #00AA00;}
.btn { font-size: 25px;}

</style>
</head>

<body>
<button class="btn"> Tombol </button>
</body>
</html>

Hasil :





Button Width
Untuk mengatur lebar sebuah tombol.

Contoh :

<html>
<head>
<style>
.btn { background-color: #00AA00;}
.btn { font-size: 25px;}
.btn { width: 250px;}
</style>
</head>

<body>
<button class="btn"> Tombol </button>
</body>
</html>

Hasil :





Button Padding
Untuk menentukan padding pada tombol.

Contoh :

<html>
<head>
<style>
.btn { background-color: #00AA00;}
.btn { font-size: 25px;}
.btn { width: 300px;}
.btn { padding : 14px 40px;}
</style>
</head>

<body>
<button class="btn"> Tombol </button>
</body>
</html>

Hasil :





Rounded Button
Untuk mengatur ketajaman pada tombol.

Contoh :

<html>
<head>
<style>
.btn { background-color: #00AA00;}
.btn { font-size: 25px;}
.btn { width: 300px;}
.btn { padding : 14px 40px;}
.btn { border-radius: 20px;}
</style>
</head>

<body>
<button class="btn"> Tombol </button>
</body>
</html>

Hasil :





Colored Button Border
Untuk membuat bingkai pada tombol.

Contoh :

<html>
<head>
<style>
.btn { background-color: white; color: black; border: 2px solid #4CAF50;}
</style>
</head>

<body>
<button class="btn"> Tombol </button>
</body>
</html>

Hasil :





Shadow Button
Untuk membuat bayangan pada tombol.

Contoh :

<html>
<head>
<style>
.btn { box-shadow: 5px 10px 15px;}
</style>
</head>

<body>
<button class="btn"> Tombol </button>
</body>
</html>

Hasil :





Disabled Button
Untuk me-nonaktifkan sebuah tombol.

Contoh :

<html>
<head>
<style>
.btn { opacity: 0.6; cursor: not-allowed;}
</style>
</head>

<body>
<button class="btn"> Tombol </button>
</body>
</html>

Hasil :





Combine Style
Menggabungkan semua unsur style elemen CSS.

Contoh :

<html>
<head>
<style>

.btn { background-color: #4CAF50;}
.btn {border: none;}
.btn {color: white;}
.btn {padding: 15px 32px;}
.btn {text-align: center;}
.btn {text-decoration: none;}
.btn {display: line-block;}
.btn {font-size: 16px;}

</style>
</head>

<body>
<button class="btn"> Tombol </button>

</body>
</html>

Hasil :




Nah jadi seperti itulah cara mengatur button di CSS, Mudah bukan. Jika kalian suka dengan blog ini silahkan bagikan kepada teman anda. Agar kita bisa berbagi ilmu dengan sesama....
Lokasi: Cikarang, Bekasi, Jawa Barat, Indonesia
Hai perkenalkan nama saya Pilip Mulyadi. Saya adalah seorang siswa kelas 11 dan saya mengambil jurusan TKJ.

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Absen Dengan HTML Dan CSS

Oleh -
Image
Membuat Absen Dengan HTML & CSS Pasti kalian sudah tau bentuk absen pada umunya itu seperti apa. Kali ini saya akan memberikan tutorial bagaimana cara membuat Absen dengan HTML dan CSS. waktu di HTML Part 4 kalian sudah belajar bagaimana cara membuat tabel. Dan berikut adalah Codingnya : <!DOCTYPE html> <html> <head> <style> div.a {text-align: center;} body {background-color:gray;} td { font-weight: bold;        text-shadow: 1px 1px 3px;        color: red;        background-color: deepskyblue;} table {border: 7px solid red;} </style> </head> <body> <div class="a"> <table border="10"cellpadding="5"> <tr> <th colspan="3" style="color:red; background-color: yellow;"> Masukan Nama Jurusan </th> <th rowspan="2" bgcolor="orange"> Check </th> </tr> <tr> <th style="color:red; background-color:lime;"> Nama </...
Read more

Cara membuat kalkulator dengan HTML dan CSS

Oleh -
Image
Cara Membuat Kalkulator       Hai teman-teman perkenalkan nama saya Pilip Mulyadi, saya adalah seorang siswa kelas 11 dan saya mengambil jurusan TKJ atau yang disebut dengan (Teknik Komputer dan jaringan). Saya suka sekali dengan web desain dan pada kesempatan kali ini saya akan memberikan sebuah materi yang berisi tentang HTML dan CSS. Semoga dengan ilmu yang saya bagikan kepada kalian semua bermanfaat.      Ok teman - teman di kesempatan kali ini saya akan memberikan tutorial bagaimana cara membuat kalkulator. Kita sudah tahu bagaimana bentuk dari sebuah kalkulator. Kalkulator ini bisa berfungsi seperti kalkulator pada umumnya. Untuk membuat kalkulator di html, kalian harus menyediakan editor teks/Notepad dan simpan dengan format html. Daripada kalian penasaran coding htmlnya seperti apa, berikut dibawah inilah codingnya : <html> <head> <style> body { background-color: gray;} div.a {text-align: center;} div.b {text-align: left;} .ckr { w...
Read more

Materi Tentang JavaScript Lengkap

Oleh -
Image
1). Pengenalan JavaScript JavaScript  adalah bahasa pemrograman yang digunakan untuk membuat interaksi dan menambah fitur dinamis ke dalam halaman web. Untuk membuat website, memang tidak harus menggunakan JavaScript. Namun saat ini penggunaan JavaScript hampir selalu ada di setiap web modern. Bagi programer web, JavaScript merupakan salah satu bahasa pemrograman web yang wajib di kuasai. Pada awal pembuatan JavaScript di tunjukan untuk membuat interaksi antara User dengan website menjadi lebih cepat dan tanpa menunggu pemrosesan dari server. Misalnya sebuah form yang terdapat di website dengan JavaScript kita dapat langsung memvalidasi dan mengetahui setiap inputan masih kosong atau sudah di isi dengan benar atau belum secara cepat. Sedangkan ketika tidak menggunakan JavaScript (cara lama) maka isi form tersebut harus di kirim dan di proses di server website terlebih dahulu dengan cara mengklik tombol submit yang ada di di dalam form, dan ketika ada inputan form yang tidak valid a...
Read more