Membuat Button di Pure CSS

 



Kalo kemarin kita membahas mengenai merancang Form dengan menggunakan Framework Pure CSS, kali ini saya akan menshare bagaimana Cara Membuat Button di Pure CSS. Pastinya seperti yang sebelumnya saya sindir, Pure CSS ini yakni Framework CSS yang sama seperti Bootstrap Framework, sama sama framework CSS, dan mempunyai kekurangan dan kelebihannya masing masing dan tentu kita disini tak membahas mengenai itu, oke baiklah kita ke bahan.





kalian buka text editor kalian dan ketikan kode struktur html seperti lazim



<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Pure CSS</title>
</head>
<body>

</body>
</html>


lalu klaian dapat unduh kelas kelas pure css ini di link ini https://github.com/yahoo/pure/ atau ketikan sebelum peneutup head kode berikut



<link rel=stylesheet href=https://unpkg.com/purecss@1.0.0/build/pure-min.css integrity=sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w crossorigin=anonymous>


ada beberapa jenis button di Pure CSS yang dapat kita gunakan,



Default Buttons



Default Button yakni tombol default Button bwaan Pure CSS. kalian dapat ketikan kode berikut di antara tag body:



<a class=pure-button href=#>A Pure Button</a>
<button class=pure-button>A Pure Button</button>


Hasilnya seperti gambar di bawah ini



Kalo



Active Buttons



Yaitu Tombol yang ketika kita tekan karenanya efek tekan akan terlihat. kode nya seperti berikut



<a class= pure-button pure-button-active href =# > An Active Button </a>
<button class =pure-button pure-button-active > An Active Button </button>


hasilnya seperti gambar di bawah ini



Kalo



Disable Buttons



Disable Buttons yakni class bagi menonaktivkan tombol. Cara membuatnya sendiri tinggal tambah kan class “pure-button-disable” di tag button atau ketikan atribut “disable” seketika ke tab button . lihat contoh di bawah.



<button class=pure-button pure-button-disabled > A Disabled Button </button>
<button class=pure-button disabled > A Disabled Button </button>


hasilnya seperti gambar di bawah ini



Kalo



Primary Buttons



Primary Button yaitu tombol yang mempunyai warna biru, dan lazim di sebut warna informasi, nah bagi memakai class ini lumayan ketikan kode di bawah ini



<a class=pure-button pure-button-primary href=#>A Primary Button</a>
<button class=pure-button pure-button-primary>A Primary Button</button>


hasilnya seperti gambar berikut ini.



Kalo



Oke demikian panduan Membuat Button di Pure CSS, semoga bermanfaat yah teman teman 😀




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more