Membuat Button di Pure CSS

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

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

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

lalu klaian bisa download 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 bisa kita pakai,

Default Buttons

Default Button adalah tombol default Button bwaan Pure CSS. kalian bisa 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

Active Buttons

Yaitu Tombol yang ketika kita tekan maka 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

Disable Buttons

Disable Buttons adalah class untuk menonaktivkan tombol. Cara membuatnya sendiri tinggal tambah kan class “pure-button-disable” pada tag button atau ketikan atribut “disable” langsung 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

Primary Buttons

Primary Button yaitu tombol yang mempunyai warna biru, dan biasa di sebut warna info, nah untuk memakai class ini cukup 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.

Oke sekian tutorial Membuat Button di Pure CSS, semoga bermanfaat yah teman teman 😀

Kategori