Cara Membuat Disable Button dengan Pure CSS
Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti lazimnya ya teman-teman, semoga masih diberikan medis dan kebahagiaan agar dapat kembali semangat pada mencari informasi atau ingin mengupgrade skill didunia laman.
Di kesempatan kali ini saya akan membahas mengenai Cara Merancang Disable Button dengan Pure CSS. sebelum kita mulai, pengenalan mengenai pure css ini adalah sebuah sebuah framework css. ya di dasarnya sih sama saja dengan framework css yang lainnya seperti contoh familiarnya bootstrap namun manfaat dan tujuannya sama bagi mempermudah kita pada membangun/memaksimalkan laman.
Oke seketika saja kita mulai Cara Merancang Disable Button dengan Pure CSS. Langkah pertama-tama teman-teman silahkan unduh master pure css nya di https://purecss.io/ bila telah silahkan extract, karenanya akan Nampak file index.html dan silahkan teman-teman buka ditext-editornya karenanya hasilnya akan sama seperti dibawah ini :
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content=width=device-width, initial-scale=1.0>
<title>Your page title</title>
<link rel=stylesheet href=https://unpkg.com/purecss@0.6.2/build/pure-min.css></head>
<body>
<!--
Your HTML goes here. Visit purecss.io/layouts/ for some contoh HTML code.
-->
</body>
</html>
Lumayan gampang yah teman-teman, oke langkah berikutnya silahkan teman-teman tambahkan script seperti dibawah ini :
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content=width=device-width, initial-scale=1.0>
<title>Cara Merancang Disable Button dengan Pure CSS</title>
<link rel=stylesheet href=https://unpkg.com/purecss@0.6.2/build/pure-min.css>
<style>
center{margin-top: 100px}
</style>
</head>
<body>
<center>
<button class=pure-button pure-button-disabled>Disable Button</button> <!-- class with purecss -->
<button class=pure-button disabled>Disabled Button</button> <!-- class use default disable -->
</center>
</body>
</html>
Bila telah silahkan coba teman-teman jalankan/run dibrowser yang teman-teman gunakan bila benar karenanya hasilnya akan terlihat seperti di gambar dibawah ini :
Bagaimana teman-teman ? lumayan gampang ya pada Cara Merancang Disable Button dengan Pure CSS. dan bagi pengembangannya silahkan teman-teman baca-baca di laman resminya di purecss.io dan silahkan ngulik-ngulik hehehe.
Oke kalau demikian itu lumayan demikianlah pembahasan kali ini mengenai Cara Merancang Disable Button dengan Pure CSS. semoga bermanfaat dan hingga bertemu dipembahasan berikutnya.
Terimakasih
Sumber https://kursuswebsite.org
