Sabtu, 18 Maret 2017

Membuat Berbagai Macam Button Dengan W3.CSS

Assalamualaikum Wr.Wb


Pada postingan kali ini saya akan membahas bagaimana cara membuat berbagai jenis button yang sebenarnya pada postingan saya sebelumnya sudah ada tentang bagaimana membuat button dengan mudah dengan bootstrap bisa di baca di sini .Tapi kali ini berbeda saya akan menggunakan w3css yang tentunya hasilnya juga berbeda.

  • Pengertian
W3css adalah semacam framework css,jadi ini hampir sama dengan bootstrap,jadi kita tidak perlu repot membuat style css karena w3css ini sudah lumayan lengkap menurut saya.W3css memiliki beberapa keunggulan :
  1. Lebih kecil dan lebih cepat dari framework CSS lainnya.
  2. Mudah untuk belajar, dan lebih mudah digunakan daripada framework CSS lainnya.
  3. Bisa responsive di berbagai perangkat seperti laptop,hp,tablet dll.
  • Latar Belakang
Menerapkan penggunaan W3css untuk membuat sebuah tampilan pada website yang akan di buat.Dengan menggunakan w3css di harapkan bisa mempercepat dan mempermudah kita semua dalam membuat tampilan website.
  • Alat Dan Bahan
  1. Laptop atau pc
  2. Software atau aplikasi untuk coding(notepad++,sublime dll)
  3. Koneksi internet(untuk memanggil style w3css agar lebih praktis)
  • Jangka Waktu
  1. 30 - 40 menit(untuk membuat button dengan berbagai style)
  • Tahap Penyelesaian


  • Button Colors
Tuliskan script berikut ini dengan catatan teman semua harus terkoneksi ke internet.

<!DOCTYPE html>
<html>
<head>
    <title>W3css</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
</head>
<body class="w3-container">
<h1>Contoh Button Colors</h1>
<button class="w3-btn w3-red">Red</button>
<button class="w3-btn w3-pink">Pink</button>
<button class="w3-btn w3-purple">Purple</button>
<button class="w3-btn w3-deep-purple">Deep Purple</button>
</body>
</html>

Dan inilah hasilnya

  •  Button Hover Colors
Ini akan memberikan efek berwarna saat mouse hover.

<!DOCTYPE html>
<html>
<head>
    <title>W3css</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
</head>
<body class="w3-container">
<h1>Contoh Button Colors</h1>
<button class="w3-btn w3-hover-red">Red</button>
<button class="w3-btn w3-hover-pink">Pink</button>
<button class="w3-btn w3-hover-purple">Purple</button>
<button class="w3-btn w3-hover-deep-purple">Deep Purple</button>
</body>
</html>
 Dan inilah hasilnya


  • Button Shapes
Ini di  gunakan untuk mengatur bentuk button tepatnya pada  bentuk tepian button.
<!DOCTYPE html>
<html>
<head>
    <title>W3css</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
</head>
<body class="w3-container">
<h1>Contoh Button shapes</h1>
<button class="w3-btn w3">Normal</button>
<button class="w3-btn w3-round">Round</button>
<button class="w3-btn w3-round-xlarge">Round xlarge</button>
<button class="w3-btn w3-xxlarge">Round xxlarge</button>
</body>
</html>
Dan ini hasilnya

  •  Button Size
Di gunakan untuk mengatur besar kecilnya button
<!DOCTYPE html>
<html>
<head>
    <title>W3css</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
</head>
<body class="w3-container">
<h1>Contoh Button sizes</h1>
<button class="w3-btn w3-small">small</button>
<button class="w3-btn w3-medium">medium</button>
<button class="w3-btn w3-large">large</button>
<button class="w3-btn w3-xlarge">xlarge</button>
</body>
</html>
 Dan inilah hasilnya

  • Button Border
Ini digunakan gunakan untuk memberikan border pada tepian button

<!DOCTYPE html>
<html>
<head>
    <title>W3css</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
</head>
<body class="w3-container">
<h1>Contoh Button Border</h1>
<button class="w3-btn w3-white w3-border w3-round-xlarge">Button</button>
<button class="w3-btn w3-white w3-border w3-border-blue w3-round">Button</button>
<button class="w3-btn w3-white w3-border w3-border-red w3-round-large">Button</button>
<button class="w3-btn w3-white w3-border w3-border-green w3-round-xlarge">Button</button>
<button class="w3-btn w3-white w3-border w3-border-yellow w3-round-xlarge">Button</button>
</body>
</html>
Dan inilah hasilnya

  •  Hasil Dan Kesimpulan
Dengan adanya framework seperti w3css akan lebih mempermudah dan mempercepat kita untuk membuat tampilan web salah satunya membuat button ini.

Demikian postingan kali ini semoga bermanfaat,sampai jumpa di postingan berikutnya.

Wassalamualaikum Wr.Wb
Share:

0 komentar:

Posting Komentar